1817905 - Transform rotate gets distorted when parent has perspective property

Status: NEW

(Core :: Graphics: WebRender, defect, P2)

Description

[hadang999]

Attachment: Perspective bug.zip: contains two folders, an minimal reproducible example containing HTML and CSS and a fancier example also containing HTML and CSS

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Steps to reproduce:

Create a div that has the perspective property. Inside the perspective div, create a div with a transform property. Inside the transform div, apply a rotate transformation in either the X or Y axes.

See attached file for two examples. The fancy example shows a possible use case with parallax scrolling

Actual results:

The child div rotates but gets heavily distorted as if there is a vanishing point.

However, in the Developer Tools, when you hover over the child div in the Inspector pane, the highlighted div appears to rotate correctly.

See attached file for two examples. In the fancy example, as you scroll, the vanishing point distortion is more obvious

Expected results:

The child div should rotate without getting distorted as if there is a vanishing point. It should rotate similarly to how highlighted element rotates in the Developer Tools.

Expected behavior appears correctly in Chrome 109

Comment 1

[Bob Hood [:bhood]]

Glenn, please adjust Severity if you disagree.

Comment 2

[hadang999]

Hi, are there any updates on this issue? Thanks

Comment 3

[hadang999]

Hi, are there any new updates on this issue?

Comment 4

[Glenn Watson [:gw]]

I'll assign this to myself, and see if I can get it fixed this semester.