Bug 141331

Summary:

getBoundingClientRect() returns wrong values while CSS transform is transitioned or animated

Product:

WebKit

Reporter:

Tigran <buddha-1>

Component:

Animations

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED CONFIGURATION CHANGED

Severity:

Normal

CC:

dino, graouts, simon.fraser

Priority:

Version:

528+ (Nightly build)

Hardware:

Unspecified

OS:

Windows 7

Attachments:

Description	Flags
A page to reproduce an aspect of the bug	none
A page to reproduce an aspect of the bug - v2	none

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	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
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.