1348868 - When enabling Grid Highlighter in Inspector, grid lines are cut off at the bottom on HiDPI displays or at high zoom level

Status: RESOLVED DUPLICATE of bug 1345434

(DevTools :: Inspector, defect)

Description

[bryanlrobinson]

Attachment: Firefox Nightly Grid Lines.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.98 Safari/537.36

Steps to reproduce:

Opened up Inspector. Chose the layout mode in the Firefox Nightly dev tools. Clicked "Overlay Grid" on the main CSS Grid on the page.


Actual results:

In Firefox 52, the grid lines and gaps would extend through the entire grid container (not entire page, just container). In the Nightly build which contains the new Layout panel, the grid lines end after just half the grid container. (see screenshot). This happens at http://bryanlrobinson.com as well as other grids used on this domain.


Expected results:

Grid lines and gaps should extend to the end of the grid container.

Comment 1

[Loic]

I can't reproduce it in FF5 on Win 7 when selecting "overlay grid". Could it be specific to OSX?

In addition, there is line I don't understand, what do you mean by "Chose the layout mode in the Firefox Nightly dev tools."?

Comment 2

[bryanlrobinson]

Sorry, should have included that I was on OSX (10.11.6).

Clarification on that line: There's a new panel in dev tools in Nightly called the "Layout" panel. Probably should refer to it as a "panel" instead of "mode." I was just outlining the steps I took to get the bug. The bug can also be replicated by inspecting the grid container finding "Display: grid" in the Rules panel and clicking the icon next to "grid" in the "display: grid" declaration on the item.

This bug is also happening in the FF beta (53.0b4) on OSX (10.11.6).

Comment 3

[Loic]

Attachment: screenshot-ff55.png

Ok, I see. But still not reproducible on Win 7.

Comment 4

[bryanlrobinson]

New information: This appears to be an issue of high-dpi displays.

I took the screenshot and originally noticed it on a Macbook Pro with a Retina screen and I just tested on a Dell 4k monitor. This works as intended on a non-high-dpi screen, however.

Comment 5

[Kaytal]

Attachment: fullpagescreenshot.png

I am able to reproduce this error under the similar 

Currently on macOS Sierra 10.12.3
"Retina" display
Firefox Nightly

Comment 6

[Loic]

Attachment: screenshot-zoom-170pc.jpg

My screen is HiDPI too, not 4k, only Full HD, but it's reproducible on any display by zooming in a lot, I guess.

No need to enable layout panel, that said.

Comment 7

[bryanlrobinson]

Upon further inspection, this may just be a rehash of https://bugzilla.mozilla.org/show_bug.cgi?id=1343217 I'd love a second opinion.

Comment 8

[Julian Descottes [:jdescottes]]

I think it is a duplicate of Bug 1345434. We have a technical limitation which currently prevents from displaying the grid highlighter if the page is too big (and the issue is more obvious with high dpi) 

Closing as such for the moment.

Comment 9

[Matteo Ferretti [:zer0] [:matteo]]

It's definitely a duplicate of Bug 1345434.

In case it could be useful for the records: the reason why Loic wasn't able to reproduce on Win 7 was probably due the difference in the GPUs, and maybe the size of the page he was checked. Due the temporary fix of bug 1343217, the <canvas>'s size depends by several factors, the first of them is the max texture size the current GPU can handle. I notice that in my MBP (mid 2014) that size is extremely low compared to others.

Comment 10

[Loic]

Is there a way to display only the grid overlay in the viewport when then rendering is limited by the user's GPU?