Closed Bug 1521026 Opened 2 years ago Closed 2 years ago

Flex highlighter shouldn't scroll for position:fixed elements

Categories

(DevTools :: Inspector, defect, P2)

defect

Tracking

(firefox66 verified)

VERIFIED FIXED
Firefox 66
Tracking Status
firefox66 --- verified

People

(Reporter: pbro, Assigned: miker)

References

(Depends on 1 open bug, Blocks 1 open bug)

Details

Attachments

(3 files)

Attached image fixed-element.gif

Steps:

  • open this page: data:text/html,<div style="width:500px;height:5000px;"></div><div style="position:fixed;bottom:0;width:100%;background:red;height:50px;display:flex">I won't scroll
  • open the inspector
  • find the position:fixed element and click on the [flex] badge next to it
  • scroll the page

Expected:

The flex highlighter should stick to the element.

Actual:

The flex highlighter moves around while you scroll.

Assignee: nobody → mratcliffe
Status: NEW → ASSIGNED
OS: Unspecified → All
Priority: -- → P2
Hardware: Unspecified → All

This fixes the issue but because of our virtual canvas implementation and the
fact that reflow events are batched there is quite a bit of flicker and some
drag (see attached video).

Unfortunately, until bug 1509071 is implemented (full screen canvas using
position:fixed) we can't really do anything about the flicker... I suppose we
could stop batching reflow events but that would make all of our highlighters
unusably slow.

Pushed by mratcliffe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/dc8bd111db70
Flex highlighter shouldn't scroll for position:fixed elements r=gl
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 66

This bug still exists for the grid highlighter, FWIW. (If you adjust the data URI in comment 0 to use display:grid instead of display:flex, then the bug still reproduces. Here's a modified data URI for that:

data:text/html,<div style="width:500px;height:5000px;"></div><div style="position:fixed;bottom:0;width:100%;background:red;height:50px;display:grid">I won't scroll

I guess bug 1521067 covers that. (Incidentally, that also means bug 1521825 is not [yet] a problem for the grid highlighter. :))

Confirmed the issue with 66.0a1 (2019-01-18) on Windows 10 x64, Ubuntu 18.04 x64, macOS 10.11.6.
Fix verified with 66.0b3 build1 (20190128143734), Windows 10 x64, Ubuntu 18.04 x64, macOS 10.11.6.
Considering that the still existing flicker won’t be fixed per comment 2 and the grid highlighter issue is treated separately per comment 5, I will mark this bug accordingly.

Status: RESOLVED → VERIFIED
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.