tag:forum.selfhtml.org,2005:/selfJQUERY falsche OFFSET Position bei translateY – SELFHTML-Forum2019-02-21T09:57:40Zhttps://forum.selfhtml.org/self/2019/feb/20/jquery-falsche-offset-position-bei-translatey/1743046#m1743046mixmastertobsi2019-02-20T17:22:25Z2019-02-20T17:22:25ZJQUERY falsche OFFSET Position bei translateY<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>
https://forum.selfhtml.org/self/2019/feb/20/jquery-falsche-offset-position-bei-translatey/1743058#m1743058Rolf B2019-02-20T21:04:53Z2019-02-20T21:04:53ZJQUERY falsche OFFSET Position bei translateY<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>
https://forum.selfhtml.org/self/2019/feb/20/jquery-falsche-offset-position-bei-translatey/1743061#m1743061mixmastertobsi2019-02-21T07:46:36Z2019-02-21T09:31:07ZJQUERY falsche OFFSET Position bei translateY<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>
https://forum.selfhtml.org/self/2019/feb/20/jquery-falsche-offset-position-bei-translatey/1743067#m1743067Rolf B2019-02-21T09:57:40Z2019-02-21T09:57:40ZJQUERY falsche OFFSET Position bei translateY<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>