1629011 - 3D transforms on an element that is the child of a <button> with transform-style: preserve-3d makes the element disappear

Status: VERIFIED FIXED

(Core :: Web Painting, defect, P2)

Description

[kud]

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

Steps to reproduce:

On this demo : https://codepen.io/aaroniker/full/bGVGNrV the icons aren't shown up. It works on chrome.

You can follow the slack discussion here: https://devtools-html.slack.com/archives/C3VTFTCBY/p1586513103082200

Comment 1

[Florens Verschelde :fvsch]

This might be a bug for the Layout or Graphics teams.

What points to a bug with 3D transforms is that if you disable these transforms, the icons show up:

.button {
-  will-change: transform;
-  -webkit-transform-style: preserve-3d;
-  transform-style: preserve-3d;
-  -webkit-transform: perspective(440px) rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg)) translateZ(0);
-  transform: perspective(440px) rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg)) translateZ(0);
}

Comment 2

[Tim Nguyen :ntim]

Attachment: testcase.html

Made a reduced testcase that might be helpful.

There's a blue rectangle in Chromium, while Firefox does not render one.

Comment 3

[Tim Nguyen :ntim]

Attachment: testcase.html

An even more reduced test case, which confirms this is a Firefox bug.

This seems like the combination of the following:

• transform-style: preserve-3d; on the parent
• that parent is a <button> element (doesn't happen with <div>)
• the child has a 3D transform on it (even a dummy one like translateZ(0) or rotateZ(0))

Comment 4

[Tim Nguyen :ntim]

The testcase renders fine on Safari and Chromium.

Comment 5

[Tim Nguyen :ntim]

Regression range: https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=b266a8d8fd595b84a7d6218d7b8c6b7af0b5027c&tochange=035c25bef7b5e4175006e63eff10c61c2eef73f1

Bug 1359709 looks suspicious.

Matt, can you please take a look?

Comment 6

[Sid Vishnoi :sidvishnoi]

I added a comma in transform list in the codepen and it worked.

- transform: translate(calc(var(--icon-x, 0) * 1px), calc(var(--icon-y, 0) * 1px)) translateZ(2px);
+ transform: translate(calc(var(--icon-x, 0) * 1px), calc(var(--icon-y, 0) * 1px)), translateZ(2px);

Comment 7

[Tim Nguyen :ntim]

(In reply to Sid Vishnoi :sidvishnoi from comment #6)

I added a comma in transform list in the codepen and it worked.

- transform: translate(calc(var(--icon-x, 0) * 1px), calc(var(--icon-y, 0) * 1px)) translateZ(2px);
+ transform: translate(calc(var(--icon-x, 0) * 1px), calc(var(--icon-y, 0) * 1px)), translateZ(2px);

This is because it makes the transform declaration invalid and compute to none. So it's like removing the transform from the demo.

Comment 8

[Sid Vishnoi :sidvishnoi]

(In reply to Tim Nguyen :ntim from comment #7)

(In reply to Sid Vishnoi :sidvishnoi from comment #6)

I added a comma in transform list in the codepen and it worked.

- transform: translate(calc(var(--icon-x, 0) * 1px), calc(var(--icon-y, 0) * 1px)) translateZ(2px);
+ transform: translate(calc(var(--icon-x, 0) * 1px), calc(var(--icon-y, 0) * 1px)), translateZ(2px);

This is because it makes the transform declaration invalid and compute to none. So it's like removing the transform from the demo.

Oops. Trusted devtools too much here. Devtools didn't show the declaration as invalid.

Comment 9

[Bert Peers [:bpeers]]

Hi Matt, do you have some more details on how you were able to narrow this down to the Graphics component?

Comment 10

[Firefox Bug Husbandry Bot]

Resetting severity to default of --.

Comment 11

[Matt Woodrow (:mattwoodrow)]

I'm changing my mind actually, I looked at the wrong bug from the regression range.

The regressing bug 1359709, made it so that we use the parent DOM element to decide if a transformed frame should be included in a preserve-3d context, instead of the parent layout frame.

The <button> element creates an anonymous block frame around its children, so previously the transform-style:preserve-3d would have had no effect, and now it does.

That said, it shouldn't actually break, so I guess there's a bug in how we build the display list in this case.

Miko, do you have any time to look at this?

Comment 12

[Miko Mynttinen]

Attachment: Bug 1629011 - Recurse into block wrappers when marking preserve-3d frames for display list building r=mattwoodrow

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5d161b0edb1b
Recurse into block wrappers when marking preserve-3d frames for display list building r=mattwoodrow

Comment 14

[Tim Nguyen :ntim]

Comment on attachment 9142090 [details]
Bug 1629011 - Recurse into block wrappers when marking preserve-3d frames for display list building r=mattwoodrow

Beta/Release Uplift Approval Request

• User impact if declined: Web compatibility issue with CSS transforms.
• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: Open attachment 9139754 [details], correct rendering should show a blue square in the button.
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Small self-contained patch with test
• String changes made/needed:

Comment 15

[Emilio Cobos Álvarez (:emilio)]

This is a very old regression, and the patch affects more stuff than buttons, like IB splits... Why do you want it uplifted Tim?

Comment 16

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9142090 [details]
Bug 1629011 - Recurse into block wrappers when marking preserve-3d frames for display list building r=mattwoodrow

It's late in the cycle for 76 and this is a very old issue. Let's let this ride 77 to release so it can get some more bake time.

Comment 17

[Alexandru Michis [:malexandru]]

https://hg.mozilla.org/mozilla-central/rev/5d161b0edb1b

Comment 18

[Peter Magyari (Desktop QA)]

Reproduced the issue on MacOS 10.15 and Windows 10 using Firefox 75.0 (20200403170909) and Firefox 76.0b7 (20200421231527)
Verified fixed on Firefox Nightly 77.0a1 (20200422214848)