1376764 - UI/Scrolling issues with CSS grid after Firefox is resized

Status: RESOLVED DUPLICATE of bug 1342929

(DevTools :: Inspector, defect, P3)

Description

[Ciprian Georgiu, Desktop QA]

Attachment: screencast showing the issue.gif

[Affected versions]:
- latest Nightly 56.0a1
- Beta 55.0b5 (20170626165718)

[Affected platforms]:
- Windows 10 x64
- macOS 10.12.5
- Ubuntu 16.04 x64 LTS

[Steps to reproduce]:
1. Start Firefox.
2. Go to: https://www.mozilla.org/en-US/developer/css-grid/?utm_source=gridtooltip&utm_medium=devtools&utm_campaign=cssgrid_layout
3. Open Inspect Element (F12) and go to the Layout tab.
4. Check "div.content.grid-content " and "Extend grid lines infinitely". (this option is not absolutely necessary for reproducing)
5. Resize Firefox for a few times.

[Expected result]:
- No UI glitches or scrolling issues while Grid Overlay is selected.

[Actual result]:
- The bottom page can't be scrolled and also glitches can be seen.

[Regression range]:
- https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=b043233ec04f06768d59dcdfb9e928142280f3cc&tochange=c7e37c13ea9e0442eca9c22a1c7d450abd0d3f64

[Additional notes]:
- I was able to repro this on different sites like: https://css-tricks.com/snippets/css/complete-guide-grid/ or https://gridbyexample.com.

Comment 1

[Patrick Brosset <:pbro>]

Looking at the regression range, this is most probably due to bug 1345434.
I was able to reproduce, without even having to resize the window:

- go to https://www.mozilla.org/en-US/developer/css-grid/?utm_source=gridtooltip&utm_medium=devtools&utm_campaign=cssgrid_layout
- make sure the page is scrolled all the way to the bottom (you should see the black footer)
- in the layout panel, check the first grid checkbox
==> Notice that suddenly, the page gets way taller, and you can scroll past the black footer, further down.

It seems like the canvas we create to draw the lines takes too much space and grows the page.

Matteo: mind taking a look at this one, or needinfoing someone else if you don't have the time.

Comment 2

[Gabriel Luong [:gl] (ΦωΦ)]

This is another example of a different highligher with the same issue. http://recordit.co/TGTaSZugKN/. Reported by jlast.

zer0, would this also be fixable? I know you said this is a common issue across the highlighters. Otherwise, let's make sure we file the necessary bugs on what is fixable and what is unfixable and why.

Comment 3

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

(In reply to Patrick Brosset <:pbro> (away) from comment #1)

> Looking at the regression range, this is most probably due to bug 1345434.
> I was able to reproduce, without even having to resize the window:

I was able to reproduce only on a retina display, without zooming or resizing, and with some specific windows' size. This is definitely another bug related to virtual canvas, and it's not the same bug mentioned here.

To be clear:

1. The additional space when we resize / zoom is due bug 1342929, and we can't do anything about it from our side, we need platform support for that.

2. If that is happening without resizing / zooming, the cause is different.

Thefore, I will close this bug as duplicate of bug 1342929, and I will file a new bug about the virtual canvas implementation issue.

> ( This is another example of a different highligher with the same issue.
> http://recordit.co/TGTaSZugKN/. Reported by jlast.

It depends if it's still related to zooming / resizing or not, I can't tell from the video. If it's related to zooming or resizing, then the bug is a duplicate of bug 1342929, otherwise we should file a new bug and investigate specifically what is happening on that specific highlighter.