Bug 278898 – Safari renders html elements with complex transforms in the wrong position

• Component: Layout and Rendering
• Status: NEW

[Ivan]

Created attachment 472363 [details]
Issue demonstration with web inspector

Check the attached screenshot, web inspector shows the right element size and position, but Safari renders it in a wrong place. The element reacts on mouse events also correctly - according to its real position.
Here you can find the live example https://3dflipbook.net/css-layer-highlight
This is a regression issue, it was working fine in 15.6.

[Simon Fraser (smfr)]

Thank you for the report; I can reproduce it—the highlight rectangles are placed too high.

[Radar WebKit Bug Importer]

<rdar://problem/135020569>

[alan]

Created attachment 472385 [details]
Web Inspector screen-recording

This looks like some subpixel math on transformed layers.

[Simon Fraser (smfr)]

Created attachment 472450 [details]
Test case

This is about the transforms applied. There's a `perspective` property on a containing element, then this transform on a descendant:

        transform: translate(-50%, -50%) translate(694px, 396.5px) translateZ(1479.76px)
            matrix3d(1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, -1.05957, 0, -6.15494, 1)
            matrix3d(0.00205, 0, 0, 0, 0, 0, 0.00205, 0, 0, 1, 0, 0, 1.05006, 0.0038, 0, 1);

This seems to expose a bug in our hit-testing code.

[Simon Fraser (smfr)]

> This seems to expose a bug in our hit-testing code.

Actually, hit-testing is correct, the bug is in the rendering.

[Simon Fraser (smfr)]

The author is trying to use CSS transforms to have HTML elements accurately overlay content drawn into a canvas.