JQUERY falsche OFFSET Position bei translateY – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self JQUERY falsche OFFSET Position bei translateY Wed, 20 Feb 19 17:22:25 Z https://forum.selfhtml.org/self/2019/feb/20/jquery-falsche-offset-position-bei-translatey/1743046#m1743046 https://forum.selfhtml.org/self/2019/feb/20/jquery-falsche-offset-position-bei-translatey/1743046#m1743046 <p>Hallo,</p> <p>ich möchte mit JQUERY die offset-Top Position ermitteln und es kommt ein falsche Ergebnis, wenn eines der ELternelemente mit transform verschoben ist.</p> <p>Welche Möglichkeit gibt es hier, um den Fehler zu beheben? Muss ich jetzt alle Elternelemente kontrollieren, ob diese ggf. mit Translate verschoben sind?</p> JQUERY falsche OFFSET Position bei translateY Wed, 20 Feb 19 21:04:53 Z https://forum.selfhtml.org/self/2019/feb/20/jquery-falsche-offset-position-bei-translatey/1743058#m1743058 https://forum.selfhtml.org/self/2019/feb/20/jquery-falsche-offset-position-bei-translatey/1743058#m1743058 <p>Hallo mixmastertobsi,</p> <p>hast Du ein Beispiel? Was kommt raus, was würdest Du erwarten?</p> <p>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.</p> <p>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.</p> <p>.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.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> JQUERY falsche OFFSET Position bei translateY Thu, 21 Feb 19 07:46:36 Z https://forum.selfhtml.org/self/2019/feb/20/jquery-falsche-offset-position-bei-translatey/1743061#m1743061 https://forum.selfhtml.org/self/2019/feb/20/jquery-falsche-offset-position-bei-translatey/1743061#m1743061 <p>Hi, ich habe nun mal versucht mein Problem "nachzubauen".</p> <p><a href="https://jsfiddle.net/ngub7pxt/" rel="noopener noreferrer">https://jsfiddle.net/ngub7pxt/</a></p> <p>Das Fixed-Element sollte eigentlich auch nur 53,5px von oben positioniert werden.</p> JQUERY falsche OFFSET Position bei translateY Thu, 21 Feb 19 09:57:40 Z https://forum.selfhtml.org/self/2019/feb/20/jquery-falsche-offset-position-bei-translatey/1743067#m1743067 https://forum.selfhtml.org/self/2019/feb/20/jquery-falsche-offset-position-bei-translatey/1743067#m1743067 <p>Hallo mixmastertobsi,</p> <p>da hast Du einen ganzen Schwarm Probleme auf einmal.</p> <ol> <li>display:inline-block im parent + position:fixed im child</li> </ol> <p>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.</p> <ol start="2"> <li>transform:translate und position:fixed</li> </ol> <p>Hier hilft Tante Google (transform position fixed) und verweist auf StackOverflow, und von da auf die <a href="https://www.w3.org/TR/css-transforms-1/#transform-rendering" rel="nofollow noopener noreferrer">Spec zu transform</a>. 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.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div>