2034283 - transform-style: preserve-3D does not preserve as expected in vers. 150+

Status: RESOLVED FIXED

(Core :: Graphics: WebRender, defect)

Description

[fiend]

Attachment: Side by side comparison of preserve-3d behavior as it is currently, and how it should be

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

Steps to reproduce:

Visited my game website, which heavily utilizes 3D CSS transforms and transform-style, simulating an explorable environment.

• Visit https://corru.observer/local/city/street/?force
• Click the "Proceed" prompt once loaded
• View graphics

Actual results:

All elements that acted as 3D-transformed graphic divs to form the environment are invisible due to their transforms, which are no longer being preserved in 3D compared to FF 149 and lower + chrome. (see attached file)

Expected results:

The transform style should be preserved, allowing the divs to form a 3D environment. See attached file for current visuals, alongside visuals as they appear on pre-150 FF and Chromium.

Comment 1

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

The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[fiend]

Something to note is that if you use the "pick an element from a page" feature and click where one of the lamp graphics ought to be, it still does select the element correctly. If the transform is changed to not have the rotateX(-90deg) in it (or to be at a reduced rotation), it will also be visible on the ground, showing that the graphic is not being preserved. Visualized here: https://corru.works/ext/transformdisplay.gif

Comment 3

[Ryan VanderMeulen [:RyanVM]]

3:29.52 INFO: Narrowed integration regression window from [0d805fc7, 399801f5] (4 builds) to [2fc8246f, 399801f5] (2 builds) (~1 steps left)
3:29.52 INFO: No more integration revisions, bisection finished.
3:29.52 INFO: Last good revision: 2fc8246f8b2e66a6cdb607200e31bce0e7c1dc73
3:29.52 INFO: First bad revision: 399801f5e270aefd936ab342512d1991487d4585
3:29.52 INFO: Pushlog:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=2fc8246f8b2e66a6cdb607200e31bce0e7c1dc73&tochange=399801f5e270aefd936ab342512d1991487d4585

Comment 4

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

Set release status flags based on info from the regressing bug 2021812

:gw, since you are the author of the regressor, bug 2021812, could you take a look? Also, could you set the severity field?

For more information, please visit BugBot documentation.

Comment 5

[Glenn Watson [:gw]]

Attachment: Bug 2034283 - Inherit transform-style on translate-only SC reference frame

Propagate the stacking context's own transform_style to the injected
reference frame instead, in both the Gecko binding path and the wrench
yaml_frame_reader. Add a wrench reftest covering the preserve-3d +
non-zero origin + no-transform case.

Comment 6

[Glenn Watson [:gw]]

Attached patch appears to fix the regression - will do a final try run then land.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/2647a4fe5347
https://hg.mozilla.org/integration/autoland/rev/359bc263727d
Inherit transform-style on translate-only SC reference frame r=gfx-reviewers,tnikkel

Comment 8

[Silaghi Andreea]

https://hg.mozilla.org/mozilla-central/rev/359bc263727d

Comment 9

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

The patch landed in nightly and beta is affected.
:gw, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
  • See https://wiki.mozilla.org/Release_Management/Requesting_an_Uplift for documentation on how to request an uplift.
• If no, please set status-firefox151 to wontfix.

For more information, please visit BugBot documentation.

Comment 10

[Phabricator Automation]

firefox-beta Uplift Approval Request

• User impact if declined/Reason for urgency: Some websites with complex 3d CSS transforms won't render correctly.
• Code covered by automated testing?: yes
• Fix verified in Nightly?: yes
• Needs manual QE testing?: no
• Steps to reproduce for manual QE testing:
• Risk associated with taking this patch: low
• Explanation of risk level: Very small patch, has automated tests.
• String changes made/needed?: No
• Is Android affected?: yes

Comment 11

[Glenn Watson [:gw]]

Attachment: Bug 2034283 - Inherit transform-style on translate-only SC reference frame

Propagate the stacking context's own transform_style to the injected
reference frame instead, in both the Gecko binding path and the wrench
yaml_frame_reader. Add a wrench reftest covering the preserve-3d +
non-zero origin + no-transform case.

Original Revision: https://phabricator.services.mozilla.com/D296246

Comment 12

[Glenn Watson [:gw]]

Requested uplift for beta.

Comment 13

[Pulsebot]

https://github.com/mozilla-firefox/firefox/commit/a384a65da371
https://hg.mozilla.org/releases/mozilla-beta/rev/a53b21771ba5

Comment 14

[Ryan VanderMeulen [:RyanVM]]

Probably worth a Release uplift request also.

Comment 15

[Phabricator Automation]

firefox-release Uplift Approval Request

• User impact if declined/Reason for urgency: Some pages with complex 3d css transforms don't render correctly. Suggested by RyanVM.
• Code covered by automated testing?: yes
• Fix verified in Nightly?: yes
• Needs manual QE testing?: no
• Steps to reproduce for manual QE testing:
• Risk associated with taking this patch: low
• Explanation of risk level: Small patch
• String changes made/needed?: No
• Is Android affected?: yes

Comment 16

[Glenn Watson [:gw]]

Attachment: Bug 2034283 - Inherit transform-style on translate-only SC reference frame

Propagate the stacking context's own transform_style to the injected
reference frame instead, in both the Gecko binding path and the wrench
yaml_frame_reader. Add a wrench reftest covering the preserve-3d +
non-zero origin + no-transform case.

Original Revision: https://phabricator.services.mozilla.com/D296246

Comment 17

[Pulsebot]

https://github.com/mozilla-firefox/firefox/commit/bea4efcc4b21
https://hg.mozilla.org/releases/mozilla-release/rev/550ae1df5e9b