Bug 141331 - getBoundingClientRect() returns wrong values while CSS transform is transitioned or animated
Summary: getBoundingClientRect() returns wrong values while CSS transform is transitio...
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Windows 7
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2015-02-06 05:38 PST by Tigran
Modified: 2023-05-10 01:17 PDT (History)
3 users (show)

See Also:


Attachments
A page to reproduce an aspect of the bug (713 bytes, patch)
2015-02-06 05:38 PST, Tigran
no flags Details | Formatted Diff | Diff
A page to reproduce an aspect of the bug - v2 (803 bytes, text/html)
2015-02-10 02:12 PST, Tigran
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Tigran 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.
Comment 1 Simon Fraser (smfr) 2015-02-09 21:35:30 PST
Your testcase doesn't work in Safari (transform is still prefixed).
Comment 2 Tigran 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>
Comment 3 Tigran 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.
Comment 4 Tigran 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.
Comment 5 Antoine Quint 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.