1662766 - Setting transform-style: preserve-3d; on a container causes jagged edges in children elements

Status: UNCONFIRMED

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

Description

[Andy Jakubowski]

Attachment: comparison.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:81.0) Gecko/20100101 Firefox/81.0

Steps to reproduce:

1. Write markup for a parent container and a child: <main><div>Hello</div></main>
2. Give child size and background color so it’s visible: width: 300px; height: 100px; background-color: black;
3. Set transform-style: preserve-3d; on container
4. Transform child: transform: rotateZ(2deg) rotateX(8deg) rotateY(7deg);

Or, go to this page and toggle between flat and preserve-3d to observe this issue: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style

Actual results:

The rendered edges of the child element are jagged, as in not anti-aliased.

Expected results:

The rendered edges of the child element should be smooth, as in anti-aliased, just as they are in Firefox <81.

Comment 1

[Andy Jakubowski]

This appears to have been fixed in 81.0b8. Thanks!

Comment 2

[Andy Jakubowski]

Firefox 81.0 (64-bit) does not have the issue anymore. But I noticed that the bug came back in Firefox Developer Edition 82.0b4 (64-bit). So I wanted to bring it to your attention.

Comment 3

[Andy Jakubowski]

The broken animation and jagged edges came back in Firefox 96.

It visually breaks my website: https://andyjakubowski.com.

I think this may be pretty bad with so many people experimenting with 3D in the browser.

Any updates on this?

Comment 4

[Andy Jakubowski]

Attachment: Screen Shot 2022-01-13 at 9.56.18 AM.png

Comment 5

[Andy Jakubowski]

Attachment: Screen Shot 2022-01-13 at 10.12.22 AM.png

Comment 6

[Alice0775 White]

(In reply to Andy Jakubowski from comment #3)

The broken animation and jagged edges came back in Firefox 96.

It visually breaks my website: https://andyjakubowski.com.

I think this may be pretty bad with so many people experimenting with 3D in the browser.

Any updates on this?

I've filed a bug(Bug 1749950) regarding an animation glitch that I noticed.