141331 2015-02-06 05:38:31 -0800 getBoundingClientRect() returns wrong values while CSS transform is transitioned or animated 2023-05-10 01:17:24 -0700 1 1 1 Unclassified WebKit Animations 528+ (Nightly build) Unspecified Windows 7 RESOLVED CONFIGURATION CHANGED P2 Normal --- 1 buddha-1 webkit-unassigned dino graouts simon.fraser oldest_to_newest 1067344 0 246161 buddha-1 2015-02-06 05:38:31 -0800 Created attachment 246161 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. 1067989 1 simon.fraser 2015-02-09 21:35:30 -0800 Your testcase doesn't work in Safari (transform is still prefixed). 1068011 2 246161 buddha-1 2015-02-10 02:06:57 -0800 Comment on attachment 246161 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> 1068013 3 246317 buddha-1 2015-02-10 02:12:28 -0800 Created attachment 246317 A page to reproduce an aspect of the bug - v2 Added "-webkit-" to "transform" CSS property for Safari. 1068014 4 buddha-1 2015-02-10 02:14:02 -0800 (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. 1954275 5 graouts 2023-05-10 01:17:24 -0700 The test behaves correctly now: I can see a different value logged each time, incrementing by roughly 100. 246161 2015-02-06 05:38:31 -0800 2015-02-10 02:12:28 -0800 A page to reproduce an aspect of the bug webkit-getBouncingClientRect-with-transitions.html text/plain 713 buddha-1 PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KCTxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4KCgk8 dGl0bGU+Z2V0Qm91bmRpbmdDbGllbnRSZWN0IFdlYktpdCBCdWc8L3RpdGxlPgoKCTxzdHlsZT4K CQlib2R5IHsKCQkJbWFyZ2luOiAwOwoJCX0KCQkjdGVzdCB7CgkJCWRpc3BsYXk6IGlubGluZS1i bG9jazsKCQkJYmFja2dyb3VuZDogZ3JlZW47CgkJCS13ZWJraXQtYW5pbWF0aW9uOiBzbGlkZSAx MHMgbGluZWFyIGluZmluaXRlIGFsdGVybmF0ZTsKCQkJYW5pbWF0aW9uOiBzbGlkZSAxMHMgbGlu ZWFyIGluZmluaXRlIGFsdGVybmF0ZTsKCQl9CgoJCUAtd2Via2l0LWtleWZyYW1lcyBzbGlkZSB7 CgkJCXRvIHsKCQkJCXRyYW5zZm9ybTogdHJhbnNsYXRlKDEwMDBweCwgMCk7CgkJCX0KCQl9CgoJ CUBrZXlmcmFtZXMgc2xpZGUgewoJCQl0byB7CgkJCQl0cmFuc2Zvcm06IHRyYW5zbGF0ZSgxMDAw cHgsIDApOwoJCQl9CgkJfQoJPC9zdHlsZT4KPC9oZWFkPgo8Ym9keT4KCTxkaXYgaWQ9InRlc3Qi PlRlc3Q8L2Rpdj4KCgk8c2NyaXB0PgoJdmFyIHRlc3RFbCA9IGRvY3VtZW50LmdldEVsZW1lbnRC eUlkKCd0ZXN0Jyk7CgoJc2V0SW50ZXJ2YWwoZnVuY3Rpb24oKSB7CgkJY29uc29sZS5sb2coJ0xl ZnQgaXM6ICcgKyB0ZXN0RWwuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCkubGVmdCk7Cgl9LCAxMDAw KTsKCTwvc2NyaXB0Pgo8L2JvZHk+CjwvaHRtbD4= 246317 2015-02-10 02:12:28 -0800 2015-02-10 08:24:06 -0800 A page to reproduce an aspect of the bug - v2 webkit-getBouncingClientRect-with-transitions.html text/html 803 buddha-1 PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KCTxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4KCgk8 dGl0bGU+Z2V0Qm91bmRpbmdDbGllbnRSZWN0IFdlYktpdCBCdWc8L3RpdGxlPgoKCTxzdHlsZT4K CQlib2R5IHsKCQkJbWFyZ2luOiAwOwoJCX0KCQkjdGVzdCB7CgkJCWRpc3BsYXk6IGlubGluZS1i bG9jazsKCQkJYmFja2dyb3VuZDogZ3JlZW47CgkJCS13ZWJraXQtYW5pbWF0aW9uOiBzbGlkZSAx MHMgbGluZWFyIGluZmluaXRlIGFsdGVybmF0ZTsKCQkJYW5pbWF0aW9uOiBzbGlkZSAxMHMgbGlu ZWFyIGluZmluaXRlIGFsdGVybmF0ZTsKCQl9CgoJCUAtd2Via2l0LWtleWZyYW1lcyBzbGlkZSB7 CgkJCXRvIHsKCQkJCS13ZWJraXQtdHJhbnNmb3JtOiB0cmFuc2xhdGUoMTAwMHB4LCAwKTsKCQkJ CXRyYW5zZm9ybTogdHJhbnNsYXRlKDEwMDBweCwgMCk7CgkJCX0KCQl9CgoJCUBrZXlmcmFtZXMg c2xpZGUgewoJCQl0byB7CgkJCQktd2Via2l0LXRyYW5zZm9ybTogdHJhbnNsYXRlKDEwMDBweCwg MCk7CgkJCQl0cmFuc2Zvcm06IHRyYW5zbGF0ZSgxMDAwcHgsIDApOwoJCQl9CgkJfQoJPC9zdHls ZT4KPC9oZWFkPgo8Ym9keT4KCTxkaXYgaWQ9InRlc3QiPlRlc3Q8L2Rpdj4KCgk8c2NyaXB0PgoJ dmFyIHRlc3RFbCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd0ZXN0Jyk7CgoJc2V0SW50ZXJ2 YWwoZnVuY3Rpb24oKSB7CgkJY29uc29sZS5sb2coJ0xlZnQgaXM6ICcgKyB0ZXN0RWwuZ2V0Qm91 bmRpbmdDbGllbnRSZWN0KCkubGVmdCk7Cgl9LCAxMDAwKTsKCTwvc2NyaXB0Pgo8L2JvZHk+Cjwv aHRtbD4=