nicht angemeldet
JQUERY falsche OFFSET Position bei translateY
Rolf BHallo,
ich möchte mit JQUERY die offset-Top Position ermitteln und es kommt ein falsche Ergebnis, wenn eines der ELternelemente mit transform verschoben ist.
Welche Möglichkeit gibt es hier, um den Fehler zu beheben? Muss ich jetzt alle Elternelemente kontrollieren, ob diese ggf. mit Translate verschoben sind?
-
Hallo mixmastertobsi,
hast Du ein Beispiel? Was kommt raus, was würdest Du erwarten?
Wenn ich das in JSFiddle ausprobiere (mit Chrome und jQuery 3.1.1 sowie 3.3.1) und die .offset() Methode verwende, sind die Ergebnisse genau so, wie ich sie laut Doku erwarten würde.
Kritisch ist es mit der .position()-Methode, da gibt es einen Unterschied in den Werten zwischen jQuery 3.2.1 und 3.3.1. Wenn man die Doku anschaut: position() ist die Position relativ zum Parent-Element. Demnach macht 3.3.1 es richtig.
.offset() ist die Position im Dokument. Da sehe ich keine Unterschiede zwischen 3.1.1, 3.2.1 und 3.3.1. Ein transform:translate() wird eingerechnet, ein rotate auch wie es scheint.
Rolf
--
sumpsi - posui - clusi-
Hi, ich habe nun mal versucht mein Problem "nachzubauen".
https://jsfiddle.net/ngub7pxt/
Das Fixed-Element sollte eigentlich auch nur 53,5px von oben positioniert werden.
-
Hallo mixmastertobsi,
da hast Du einen ganzen Schwarm Probleme auf einmal.
- display:inline-block im parent + position:fixed im child
Durch den position:fixed auf dem span wird der Span von der Größenberechnung für das div ausgenommne. Das siehst Du, es hat keine Höhe. Durch das inline-block werden die beiden divs an Hand der Text-Baseline angeordnet. Das siehst Du auch, wenn Du den divs ein text-align:right gibst: Die Unterkante des Textes, der die top-Position des linken divs angibt, und der Rahmen des rechten, leeren div sind bündig. Dadurch ist die Top-Position des rechten div tiefer als die des rechten und du hast zusätzliches Y drin.
- transform:translate und position:fixed
Hier hilft Tante Google (transform position fixed) und verweist auf StackOverflow, und von da auf die Spec zu transform. position:fixed bezieht die Elementposition normalerweise auf den Viewport, aber wenn ein transform-tes Element Parent ist, bezieht sich fixed auf dieses Parent-Element. Die top-Eigenschaft ebenfalls. Willst Du ein Element auf den Viewport fixen, musst Du es aus dem transform-ten div herausholen.
Rolf
--
sumpsi - posui - clusi
-
-