1695121 - CSS 3D Transforms breaking when parent element has skew or rotate transform applied to it and transform-style: preserve-3d; is used

Status: NEW

(Core :: Graphics: WebRender, defect)

Description

[mysocialistemail]

Attachment: test-transform.html

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:78.0) Gecko/20100101 Firefox/78.0

Steps to reproduce:

I have been experiencing a bug with css transforms.

1.) It happens when you apply a rotate or skew transform to a parent container.
2.) Apply a perspective to the child element
3.) Apply transform-style: preserve-3d, to the grand-child element
4.) Then apply a transform to the great-grandchild.

Attached is a web page that will show the bug.

Tested on Windows 10.
It affects current firefox 86 on Windows 10 as well as nightly 88 on windows.

Actual results:

The transformed great-grandchild will be visibly glitchy and incorrectly placed.

Scrolling can casues further issues such as element to tear.

I have also found that if you use the dev tools to change some styles applied to the elements, such as “display”, it can cause the great-grandchild to render in the browser chrome.

Expected results:

Should have looked similar to how Chrome renders the elements.

Comment 1

[mysocialistemail]

Attachment: bug-3d-transform-firefox-86.png

Firefox 86 on Windows 10 render the above page.

Comment 2

[mysocialistemail]

Attachment: bug-3d-transform-nightly-88.png

Comment 3

[mysocialistemail]

Attachment: bug-3d-transform-chrome-88.png

Chrome version 88 on rendering above page

Comment 4

[mysocialistemail]

Attachment: bug-3d-transform-dev-tools-open.png

Firefox version 86 (Win) with dev tools open can cause the element to go outside of page container

Comment 5

[Alice0775 White]

WebRender seems to cause the issue.

Comment 6

[Timothy Nikkel (:tnikkel)]

Going back to 2018-01-01 the rendering was never perfect, only drawing two of the three lines that should be visible initially, but it gets worse and draws nothing initially with this regression range

https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=6b89ff1b983e3f136ada5248ed47e8632bf1df1c&tochange=3013857e53518e740937da32d92d7d68cc926a05

bug 1655732

Comment 7

[Jim Mathies [:jimm]]

I can reproduce artifacts from the text using the test case.

Comment 8

[BugBot [:suhaib / :marco/ :calixte]]

The bug assignee is inactive on Bugzilla, so the assignee is being reset.