Bug 212637 – getClientBoundingRect values sometimes wrong at end of CSS transition

• Component: Animations
• Status: RESOLVED CONFIGURATION CHANGED

Created attachment 400824 [details]
Repro

On the last frame of a css transition of transform, the values of getClientBoundingBox are _sometimes_ the same as the values that would be returned at the beginning of the transition. Once the transition-end event is fired, the values will snap back to the final values. The behavior is intermittent but not difficult to produce (every five or so transitions). When using getClientBoundingBox to pin an element to another transforming one, this leads to visual pops/glitches in Safari. 

The attached example reproduces in Safari 13.1 and STP 107, macOS 10.15.4, 2017 mbp. 

I can not reproduce the issue in Chrome 83.0.4103.61 or FF 76.0.1

For what it's worth, I've also noticed the same behavior in window.getComputedStyles(el).transform, where at the end the transition, the value is the starting value, but then snaps to the correct ending value.


While using getClientBoundingBox in an animation is not ideal, it (and getComputedStyles) is the only way I know of to get a correct coordinate in a separate element that's transitioning its transform.

Created attachment 400826 [details]
Image of issue.

Correction! : In my original post I meant "getBoundingClientRect" not "getClientBoundingBox"

[Radar WebKit Bug Importer]

<rdar://problem/63902997>

[Antoine Quint]

Just like bug 212640, this does not happen when transitioning "left" and "top" but does happen when transitioning "transform". These two issues are likely duplicates.

[Antoine Quint]

Created attachment 405689 [details]
Test using "left" and "top" properties

[Antoine Quint]

Created attachment 405690 [details]
Test using "transform" property

[Antoine Quint]

I believe this no longer reproduces with shipping Safari. Ian, if you feel I'm mistaken, please reopen the bug, but the logged values all seem to animate linearly now.