1544995 - Missing border on quizlet.com (or rather: box-shadow not showing up, with 3D transforms)

Status: RESOLVED FIXED

(Core :: Layout: Scrolling and Overflow, defect, P3)

Description

[bgstandaert]

Attachment: firefox_vs_safari_rendering.png

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

Steps to reproduce:

1. Visit https://quizlet.com/42221231/flashcards.
2. Click on the star icon in the upper-right corner of the card.

Actual results:

The star changes color, but no border appears around the card until the window is resized or the card is clicked.

Expected results:

A yellow border should appear around the card as soon as the star icon is clicked.

Mozregression says this is a regression from 2017: https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=b772e0f4138540113e91a46c99bb0d14ecc8acca&tochange=25a94c1047e793ef096d8556fa3c26dd72bd37d7, although I'm not sure if something about the site changed recently to cause this or not.

Comment 1

[Paul_B]

Hi reporter,

Thank you for taking the time to add this report.

I was able to reproduce the mentioned behavior on all the latest Firefox versions across OS-es ( Windows 10 / Ubuntu 18.04 and Mac OS 10.14).

I also verified the regression range, but unfortunately could not pinpoint the exact bug that might have caused this, other than the pushlog you provided above.

I am going to add this to Core: Layout: Images, Video and HTML Frames for an advised input. If this is not the proper component, please feel free to change it to a more appropriate one.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

That effect is done adding a box-shadow. There's all sorts of 3d transforms involved. Can somebody verify that the bug doesn't repro with WebRender enabled (gfx.webrender.all), in nightly at least?

In that regression range, bug 1313753 is the only one that stands out.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Reducing it would be immensely helpful, if somebody has the time.

Comment 4

[Paul_B]

I verified it after enabling gfx.webrander.all but unfortunately I got the same behavior across FX versions.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

You need a browser restart to make that pref change take effect.

Comment 6

[Paul_B]

I did not do that before. It does seem to work properly now after gfx.webrender.all enabling and browser restart.

Comment 7

[Tim Spurway [:tspurway]]

:sinker, could you take a look at this one?

Comment 8

[bgstandaert]

Attachment: reduced testcase

The testcase for this turned out to be pretty simple actually; it's an element with text inside an element with backface-visibility: hidden, which is inside a third element with preserve-3d. If you click the "add box-shadow" button, Firefox displays around 1px of the shadow on the bottom of the element only, whereas Chrome and Safari show a 3px shadow around the entire element.

I am also unable to reproduce this with webrender enabled.

Comment 9

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

AFAIK, :sinker is no longer active on Mozilla's project.

Comment 10

[Matt Woodrow (:mattwoodrow)]

Attachment: Bug 1544995 - Always update overflow areas up to the preserve-3d root. r?dbaron

We don't store post-transform overflow areas for frames within preserve-3d, but we do store pre-transform overflow areas.
Rather than just recomputing the changed overflow for the root, we should recompute overflows for all ancestors up to the 3d root.

Comment 11

[Patricia Lawless]

Bulk change of P3 carryover bugs to wontfix for 68.

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d1c992257a76
Always update overflow areas up to the preserve-3d root. r=dbaron

Comment 13

[Razvan Maries]

https://hg.mozilla.org/mozilla-central/rev/d1c992257a76