1715796 - Stacked element not displaying properly

Status: UNCONFIRMED

(Core :: Web Painting, defect, P3)

Description

[g.sutton]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0

Steps to reproduce:

I am not sure if this is a bug or a problem with my code. I have posted the details on Stackoverflow but have had no answers.

https://stackoverflow.com/questions/67835927/inner-content-of-stacked-divs-not-working-properly-in-firefox

Actual results:

DEMO: https://codesandbox.io/s/my-book-jlrmw?file=/src/components/HelloWorld.vue

Comment 1

[Timea Cernea [:tbabos][inactive]]

Not sure what exactly causes this issue, but moving it over to Devtools Inspector so developers can also check this out. I could also reproduce this (inspector highlights page 4) but not quite sure what is expected here. Thank you for the report!

Comment 2

[Julian Descottes [:jdescottes]]

DevTools gets a contentDomReference from https://searchfox.org/mozilla-central/rev/af8e5d37fd56be90ccddae2203e7b875d3f3ae87/browser/actors/ContextMenuChild.jsm#867 which already points to page 4.

And even discarding devtools, adding an event listener on click on the window and logging the target will log the same element corresponding to "page 4".

So this is not really about devtools and rather about the stacking order? But visually, the last page is still the one which is displayed on top. It seems to only impact event handling.

It also seems related to the transform: preserve-3d; rules. When I remove them, clicks start to target the expected element.

Adding STRs here to make this a bit easier:

• open https://codesandbox.io/s/my-book-jlrmw?file=/src/components/HelloWorld.vue
• right click on the blue rectangle on the right, select "Inspect"

ER: div with z-index: 8; should be selected
AR: div with z-index: 4; is selected. Removing transform: preserve-3d; rules on the .front-cover element fixes this. Works fine on Chrome

Tentatively moving to Core::Layout

Comment 3

[Mats Palmgren (inactive)]

Attachment: Testcase