Open Bug 1343052 Opened 7 years ago Updated 2 years ago

Box Model, Grid Inspector and other highlighters can be slightly misaligned if the page has scrolled

Categories

(DevTools :: Inspector, defect, P3)

defect

Tracking

(Not tracked)

People

(Reporter: zer0, Unassigned)

References

(Blocks 2 open bugs)

Details

(Whiteboard: [designer-tools])

Box model, Grid Inspector and other highlighters that are positioned absolutely in the page, can be slightly misaligned if the page has scrolled.

That can happens only if the page has zoomed as well, or in a display with higher density (such retina).

That's due the fact that properties such `scrollX` and `scrollY`, used to positioned the highlighters don't have subpixel precision; but mouse's wheel has actually subpixel precision – as result, we can scroll between pixels, but we can't understand that we're in a subpixel from those properties.
I was playing a bit with `documentElement.getBoundingClientRect()`, that supports subpixel precision, but unfortunately is not reliable in the edge case where the root element is styled with margin, or positioned.
Priority: -- → P3
When the page starts off without any scrollbars, and triggering the grid overlay causes the page to overflow and display scrollbars, grids at the right edge get offset by the scrollbar width.
Video: https://i.imgur.com/QCeXUeE.gifv
Screenshot: https://i.imgur.com/ebWwC1K.png
Product: Firefox → DevTools
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.