Bug 203187 – CSS Animation, Canvas 2D and WebGL: Layout reported incorrectly

• Status: NEW
• Component: Layout and Rendering

[Chris Joel]

Created attachment 381398 [details]
Screen recording of bug in Safari 13.0.2 on MacOS 10.14

When using a combination of CSS Animations, CanvasRenderingContext2D and WebGLRenderingContext, it is possible to cause DOM layout to be misreported by both `window.getComputedStyle` and `element.getBoundingClientRect` (and possibly other methods).

Here is a minimal test case demonstrating the issue: http://lopsided-motion.glitch.me/safari-13-measure-position-bug.html

The test case shows an animating black square. We attempt to read the computed CSS transform property (as well as the bounding rect) in a requestAnimationFrame callback. The layout value that we read is not correct.

I have also added a screen recording of Safari 13.0.2 demonstrating the behavior.

The following browsers were tested and DO NOT exhibit the problem (they work as intended):

 - Chrome 77
 - Firefox 69
 - Safari 12.1

The computer used to reproduce the bug and test other browsers is a 15" 2017 MacBook Pro with Radeon 560 / Intel HD Graphics 630 running macOS 10.14.6

[Chris Joel]

Created attachment 381399 [details]
Screen recording of expected behavior as seen in Chrome 77

[Chris Joel]

It may be interesting for context to see the related bug in the project where we discovered this issue: https://github.com/GoogleWebComponents/model-viewer/issues/839

[Simon Fraser (smfr)]

The test case is pretty confusing. How can I tell how the triangle is supposed to relate to the moving square?

[Radar WebKit Bug Importer]

<rdar://problem/56469219>

[Chris Joel]

Sorry for the confusion, Simon.

There is text in the upper-left corner that corresponds to the layout value being measured. As you can see in the screen recordings, the value being measured does not change in Safari 13.

The value does change as expected in Chrome 77 (per the corresponding screen recording).

I admit this repro is pretty complex, but this was the most minimal case I could create that reproduces the effect. If you want to see a more concrete example of how this affects my project, please refer to the upstream Github issue that I linked!

[Ahmad Saleem]

I am unable to reproduce the following using Safari 15.5 on macOS 12.4 on M1 Pro laptop.

Safari runs demo smoothly and the value was not getting stuck (as it was in the screen recording).

I think this can be closed as "Resolved Fixed" or "Resolved Invalid". If the bug is of WebGL driver issue on Intel or AMD based laptops then it is separate and should be tested by someone else. Thanks!