Open Bug 1695121 Opened 7 months ago Updated 2 months ago

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

Categories

(Core :: Graphics: WebRender, defect)

Firefox 86
defect

Tracking

()

ASSIGNED

People

(Reporter: mysocialistemail, Assigned: kvark)

References

(Blocks 1 open bug)

Details

Attachments

(5 files)

Attached file 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.

Firefox 86 on Windows 10 render the above page.

Chrome version 88 on rendering above page

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

WebRender seems to cause the issue.

Component: Untriaged → Graphics: WebRender
Product: Firefox → Core

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

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

Blocks: gfx-triage
Assignee: nobody → dmalyshau
No longer blocks: gfx-triage
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true
You need to log in before you can comment on or make changes to this bug.