RESOLVED CONFIGURATION CHANGED 141331
getBoundingClientRect() returns wrong values while CSS transform is transitioned or animated 
https://bugs.webkit.org/show_bug.cgi?id=141331
Summary getBoundingClientRect() returns wrong values while CSS transform is transitio...
Tigran
Reported 2015-02-06 05:38:31 PST
Created attachment 246161 [details] A page to reproduce an aspect of the bug Element.getBoundingClientRect() returns wrong values when CSS transition or animation is running on the element, and the animated property is "transform". Steps: 1. Open the attached file. 2. Open console. 3. See wrong values for "getBoundingClientRect().left" being logged as the element slides horizontally on the screen. Tested in Firefox 35 and IE 11. Their consoles are reporting the right offsets. Webkit based browsers (Chrome, Opera) log the same (incorrect) value several times.
Attachments
A page to reproduce an aspect of the bug (713 bytes, patch)
2015-02-06 05:38 PST, Tigran 		no flags
DetailsFormatted DiffDiff
A page to reproduce an aspect of the bug - v2 (803 bytes, text/html)
2015-02-10 02:12 PST, Tigran 		no flags
Details
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1 2015-02-09 21:35:30 PST
Your testcase doesn't work in Safari (transform is still prefixed).
Tigran
Comment 2 2015-02-10 02:06:57 PST
Comment on attachment 246161 [details] A page to reproduce an aspect of the bug ><!DOCTYPE html> ><html> ><head> > <meta charset="utf-8"> > > <title>getBoundingClientRect WebKit Bug</title> > > <style> > body { > margin: 0; > } > #test { > display: inline-block; > background: green; > -webkit-animation: slide 10s linear infinite alternate; > animation: slide 10s linear infinite alternate; > } > > @-webkit-keyframes slide { > to { -webkit-transform: translate(1000px, 0); > transform: translate(1000px, 0); > } > } > > @keyframes slide { > to { -webkit-transform: translate(1000px, 0); > transform: translate(1000px, 0); > } > } > </style> ></head> ><body> > <div id="test">Test</div> > > <script> > var testEl = document.getElementById('test'); > > setInterval(function() { > console.log('Left is: ' + testEl.getBoundingClientRect().left); > }, 1000); > </script> ></body> ></html>
Tigran
Comment 3 2015-02-10 02:12:28 PST
Created attachment 246317 [details] A page to reproduce an aspect of the bug - v2 Added "-webkit-" to "transform" CSS property for Safari.
Tigran
Comment 4 2015-02-10 02:14:02 PST
(In reply to comment #1) > Your testcase doesn't work in Safari (transform is still prefixed). Couldn't test Safari 'cause I'm on Windows. Added the prefix in patch now. Should work. Thank you.
Antoine Quint
Comment 5 2023-05-10 01:17:24 PDT
The test behaves correctly now: I can see a different value logged each time, incrementing by roughly 100.
Note You need to log in before you can comment on or make changes to this bug.