nicht angemeldet
Matthias Apsel
Matthias Apsel
Matthias Apsel
Matthias Apsel
Matthias Apsel
Matthias Apsel
Matthias Apsel
JürgenB
Matthias Apsel
Matthias Apsel
Matthias Apsel
Matthias Apsel
Hallo alle,
im Wiki gibt es bunte Icons, die neben der Überschrift erster Ordnung platziert sind. Mir wurde zugetragen, dass im Safari auf Mac-Rechnern diese Icons nicht am rechten Rand sind, sondern weiter links, wahrscheinlich um die Breite der span-Elemente verschoben.
Kann bitte mal jemand ein wenig Analyse betreiben?
Bis demnächst
Matthias
Hallo,
mein Kollege hat einen MAC. Wenn du mir eine URL gibst mache ich dir davon einen Screenshot.
Monika
[Vollzitat entfent]
Hallo Monika - Schlauklug ;-) ,
mein Kollege hat einen MAC. Wenn du mir eine URL gibst mache ich dir davon einen Screenshot.
Danke für deine Unterstützung. Eine URL steht im Feld „problematische Seite“, ein Screenshot nützt mir aber nichts, man müsste schon in die Entwickertools schauen, warum die Icons nicht da sind, wo sie sein sollen.
Bis demnächst
Matthias
Hallo Matthias,
mein Kollege hat einen MAC. Wenn du mir eine URL gibst mache ich dir davon einen Screenshot.
Danke für deine Unterstützung. Eine URL steht im Feld „problematische Seite“, ein Screenshot nützt mir aber nichts, man müsste schon in die Entwickertools schauen, warum die Icons nicht da sind, wo sie sein sollen.
Weil das li zu groß ist.
Safari:
Chrome:
Aber ich hatte noch keine Zeit das genauer zu untersuchen.
LG,
CK
Hallo Matthias,
so, hat mir jetzt keine Ruhe gelassen. Ändere das hier:
Tabellenkalk#dokuwiki__pagetools li > * {
display:none;
}
#dokuwiki__pagetools:hover li > *, #dokuwiki__pagetools li :focus {
display:inline;
}
Damit gehts. Das width:0; overflow:hidden; scheint nicht dazu zu führen, dass das Eltern-Element in sich zusammenfällt. Erst das ausblenden via display:none hat eine Änderung gebracht.
Ich halte das für einen Rendering-Bug im Safari.
Edit: das sind bestehende Selektoren, es sollte also nur bestehendes CSS angepasst werden müssen.
LG,
CK
Hallo Christian Kruse,
Ich halte das für einen Rendering-Bug im Safari.
Ich auch
Edit: das sind bestehende Selektoren, es sollte also nur bestehendes CSS angepasst werden müssen.
Damit geht es aber in den anderen Browsern nicht mehr (bzw. sollte auch im Safari nicht gehen), weil damit die li > * nicht dargestellt werden und somit ihre Höhe ebenfalls Null wird. Damit kleben dann die 3 Icons ohne Abstand aufeinander.
Bis demnächst
Matthias
Hallo Matthias,
Edit: das sind bestehende Selektoren, es sollte also nur bestehendes CSS angepasst werden müssen.
Damit geht es aber in den anderen Browsern nicht mehr (bzw. sollte auch im Safari nicht gehen), weil damit die
li > *nicht dargestellt werden und somit ihre Höhe ebenfalls Null wird. Damit kleben dann die 3 Icons ohne Abstand aufeinander.
Untereinander. Auch im Chrome und Firefox. Ja. Muttu halt mit margin auf dem Pseudo-Element spielen. Wird zwar immer noch springen, aber es springt auch jetzt bereits nicht unerheblich.
LG,
CK
Hallo Matthias,
Damit geht es aber in den anderen Browsern nicht mehr (bzw. sollte auch im Safari nicht gehen), weil damit die
li > *nicht dargestellt werden und somit ihre Höhe ebenfalls Null wird. Damit kleben dann die 3 Icons ohne Abstand aufeinander.
Eine ekelige Lösung, die auf display:none verzichtet: position:absolute; right:0; für das Pseudo-Element und auf #dokuwiki__pagetools:hover ul negative margins, um das springen zu vermeiden. Die genauen Werte hab ich jetzt aber nicht überprüft.
Edit: bzw right auf etwas anderes als 0 setzen ;-)
LG,
CK
Hallo Christian Kruse,
ich habe im Test-Wiki ein offenbar überflüssiges display: flex für die Pseudoelemente entfernt. Hat das im Safari Auswirkungen?
Bis demnächst
Matthias
Hallo Matthias,
ich habe im Test-Wiki ein offenbar überflüssiges
display: flexfür die Pseudoelemente entfernt. Hat das im Safari Auswirkungen?
Das hatte ich auch gesehen und im Inspector entfernt, das hat aber nichts geändert.
LG,
CK
Hallo Christian Kruse,
ich habe im Test-Wiki ein offenbar überflüssiges
display: flexfür die Pseudoelemente entfernt. Hat das im Safari Auswirkungen?Das hatte ich auch gesehen und im Inspector entfernt, das hat aber nichts geändert.
Wenn ich das display: flex entferne, hüpfts bei mir ;-)
Bis demnächst
Matthias
Hallo Matthias,
ich habe im Test-Wiki ein offenbar überflüssiges
display: flexfür die Pseudoelemente entfernt. Hat das im Safari Auswirkungen?Das hatte ich auch gesehen und im Inspector entfernt, das hat aber nichts geändert.
Wenn ich das
display: flexentferne, hüpfts bei mir ;-)
Nene, schon im Original-Zustand. :-) Siehe auch.
LG,
CK
Hallo Matthias,
Nene, schon im Original-Zustand. :-) Siehe auch.
Das ist schön, ändert aber nix daran, dass ich da nichts verändert habe ;-)
LG,
CK
Hallo Matthias,
ich verstehe noch nicht, warum, aber das span im button ist der Übeltäter:
#button-top span {
display:none;
}
#dokuwiki__pagetools:hover #button-top span {
display:inline;
}
Edit: selbst mit width:0 !important; overflow:hidden; bleibt die computed width auf auto. Irgend ein default style vielleicht?
Edit 2: nein, natürlich nicht, es ist nur ein inline-Element 😂 aber da kann man das etwas abändern:
#button-top span {
display:inline-block;
width:0;
}
#dokuwiki__pagetools:hover #button-top span {
width:auto;
}
LG,
CK
Hallo Christian Kruse,
ich verstehe noch nicht, warum, aber das
spanimbuttonist der Übeltäter:
Oh Mann ey ;-) Da bin ich auch grad dran.
Eigentlich können die auch ganz weg.
Bis demnächst
Matthias
Hallo,
Eigentlich können die auch ganz weg.
Vorsicht, vielleicht ists Kunst...
Gruß
Kalk
Hallo Christian Kruse,
ich verstehe noch nicht, warum, aber das
spanimbuttonist der Übeltäter:
ohne spans, schau mal bitte.
BTW: Bei mir springt übrigens nix. Im manchen Auflösungen mal einen halben Pixel nach rechts oder links.
Bis demnächst
Matthias
Hallo Matthias,
BTW: Bei mir springt übrigens nix. Im manchen Auflösungen mal einen halben Pixel nach rechts oder links.
also ein halber Quantensprung :)
Gruß
Jürgen
Hallo Matthias,
ich verstehe noch nicht, warum, aber das
spanimbuttonist der Übeltäter:ohne spans, schau mal bitte.
Bei mir ist da weiterhin ein span im button.
BTW: Bei mir springt übrigens nix. Im manchen Auflösungen mal einen halben Pixel nach rechts oder links.
Hier in allen drei Browsern (2560x1440).
LG,
CK
Hallo Christian Kruse,
ohne spans, schau mal bitte.
Bei mir ist da weiterhin ein
spanimbutton.
ups. falsches Wiki: ohne spans
BTW: Bei mir springt übrigens nix. Im manchen Auflösungen mal einen halben Pixel nach rechts oder links.
Hier in allen drei Browsern (2560x1440).
Hm.
Bis demnächst
Matthias
Hallo Matthias,
ohne spans, schau mal bitte.
Bei mir ist da weiterhin ein
spanimbutton.ups. falsches Wiki: ohne spans
Ohne HTTPS ;-)
Ich glaube, wir haben uns falsch verstanden. Es ist nicht das span per se, sondern der content vom button. Wenn du nur das span entfernst ändert sich nichts. Entweder, du nimmst den Button raus und machst daraus ein a (das button ist da eh nicht so sinnvoll) oder du lässt das span drin und machst das wie oben gezeigt.
LG,
CK
Hallo Christian Kruse,
Ich glaube, wir haben uns falsch verstanden. Es ist nicht das
spanper se, sondern der content vombutton. Wenn du nur dasspanentfernst ändert sich nichts. Entweder, du nimmst den Button raus und machst daraus eina(dasbuttonist da eh nicht so sinnvoll) oder du lässt dasspandrin und machst das wie oben gezeigt.
Der Button ist da reingewandert, um nach oben zu scrollen, ohne die History zu beeinflussen.
Bis demnächst
Matthias
Hallo Christian Kruse,
So, der button ist jetzt ein a (mit JS-Trickserei); die spans sind weg; das „überflüssige“ flex wieder drin. Außerdem habe ich den Pseudoelementen die Breite der Grafik gegeben, weil ich den Eindruck hatte, dass die Breite der Icons sich verändert (siehe mit flex.mp4)
Wie siehts jetzt aus?
Aber calc beherrscht der Safari schon - oder?
Bis demnächst
Matthias
Hallo Matthias,
Wie siehts jetzt aus?
Sieht gut aus.
Aber
calcbeherrscht der Safari schon - oder?
http://caniuse.com/#feat=calc ;-)
LG,
CK
Hallo Christian Kruse,
ist eigentlich dieser Flicker-Effekt Absicht?
Nö - und hab ich unter Windows auch nicht.
Bis demnächst
Matthias
Hallo Matthias,
ist eigentlich dieser Flicker-Effekt Absicht?
Nö - und hab ich unter Windows auch nicht.
Den Flicker-Effekt hab ich auch nur unter Safari. Das springen aber unter allen drei Browsern, und auch unter Linux mit Chrome/Firefox (gestern noch geprüft ;-).
LG,
CK
Hallo Christian Kruse,
Das springen aber unter allen drei Browsern, und auch unter Linux mit Chrome/Firefox (gestern noch geprüft ;-).
Bei mir hüpfst auch im FF unter Linux nicht.
Bis demnächst
Matthias