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.
Your testcase doesn't work in Safari (transform is still prefixed).
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>
Created attachment 246317 [details] A page to reproduce an aspect of the bug - v2 Added "-webkit-" to "transform" CSS property for Safari.
(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.
The test behaves correctly now: I can see a different value logged each time, incrementing by roughly 100.