Material-design-lite: Schlechte Positionierung von Tooltips
Eher ein Grenzfall, der aber dennoch in einer App passiert, die ich gerade entwickle. Dieses Szenario tritt nur auf, wenn eine Bildlaufleiste vorhanden ist und das betreffende Element eine über CSS angewendete Übersetzung hat.
Siehe Beispiel hier (mit der Maus über das rote Kästchen fahren)
So etwas würde das Problem theoretisch beheben (glaube ich)
let rect = el.getBoundingClientRect();
let left = rect.left + window.pageXOffset;
let top = rect.top + window.pageYOffset;
// now we have a more accurate representation of the current top / left coords
brandonjpierce
Alle 3 Kommentare
Interessanter Fehler. Ich kann bestätigen, dass es aufgrund der Transformation passiert, aber ich verstehe nicht _warum_. Dies sollte angegangen werden, da dies mit dem jüngsten Schub für Animationen im Internet eine ziemlich häufige Sache sein könnte.
Garbee
am 8. Juli 2015
BIS!
Das beobachtete Verhalten ist gemäß CSS-Spezifikation korrekt:
Bei Elementen, deren Layout vom CSS-Box-Modell bestimmt wird, führt jeder andere Wert als none für die Transformation zur Erstellung sowohl eines Stapelkontexts als auch eines umgebenden Blocks. Das Objekt fungiert als umschließender Block für fest positionierte Nachkommen.
Unsere Tooltips werden mit position: fixed positioniert. Das heißt, durch Anwenden einer Transformation – auch wenn es sich um eine NOP handelt – haben Sie den Ursprung für eine feste Positionierung verschoben.
Die einfache Lösung besteht darin, den Tooltip in einen anderen Container (oder body ) zu verschieben.
surma
am 9. Juli 2015
Hm, sehr interessant. Zumindest wissen wir es jetzt und können Leute hierher verweisen, wenn es wieder auftaucht. Danke für die Recherche @surma!
Garbee
am 9. Juli 2015
Verwandte Themen
s-a
·
5Kommentare
J2TEAM
·
3Kommentare
arturgspb
·
3Kommentare
shazada
·
5Kommentare
samuelcarreira
·
4Kommentare
Hilfreichster Kommentar
BIS!
Das beobachtete Verhalten ist gemäß CSS-Spezifikation korrekt:
Unsere Tooltips werden mit
position: fixedpositioniert. Das heißt, durch Anwenden einer Transformation – auch wenn es sich um eine NOP handelt – haben Sie den Ursprung für eine feste Positionierung verschoben.Die einfache Lösung besteht darin, den Tooltip in einen anderen Container (oder
body) zu verschieben.