1543964 - CSS Grid overlay not displaying properly on modals

Status: UNCONFIRMED

(DevTools :: Inspector: Layout, defect, P3)

Description

[dan]

Attachment: firfox-grid-overlay.png

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

Steps to reproduce:

Open a modal and turn on grid Overlay Grid in Developer Tools. The modal was created with CSS Grid and used Telerik Kendo UI.

Actual results:

When I open the modal and turn on the grid overlay from the Developers Tools the overlay appears above the modal instead of over it. I can scroll up to see it and it will sometimes jump back toward the actual modal if you click on the different parts of the overlay example in Developer Tools.

Expected results:

The grid overlay should line up with the actual modal instead of off of the modal, and should not move when inspecting it from Developers Tools.

Comment 1

[dan]

This happens in both Firefox Nightly and normal Firefox.

Comment 2

[Martin Balfanz [:mbalfanz]]

Might be related to bug 1521067 or bug 1521825

Comment 3

[dan]

(In reply to Martin Balfanz [:mbalfanz] from comment #2)

Might be related to bug 1521067 or bug 1521825

It's kind of similar to bug-1521067 but not tied to scrolling.

I did however find that it seems to be related to clicking the button to "Click to select the node in the inspector".
If I have the overlay on, then click that, the overlay jumps up, sometimes out of view, on the screen.

This also only happens on modals.

Comment 4

[Martin Balfanz [:mbalfanz]]

I see, that's really interesting 🤔

dan, do you have an example to a page where we can reproduce the behavior? I tried a couple of fixed/absolute positioned grids to rebuild a modal, but I didn't manage to run into the same problem.

Comment 5

[BugBot [:suhaib / :marco]]

Clear a needinfo that is pending on an inactive user.

Inactive users most likely will not respond; if the missing information is essential and cannot be collected another way, the bug maybe should be closed as INCOMPLETE.

For more information, please visit auto_nag documentation.