1430580 - Spanning Grid item has too much space at the bottom / is too high

Status: RESOLVED DUPLICATE of bug 1430757

(Firefox :: Untriaged, defect)

Description

[Tobi Reif]

Attachment: testcase_by_fantasai.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20180103231032

Steps to reproduce:

Open (the work-in-progress demo)
https://tobireif.com/demos/grid/ , 
set the viewport width to approximately 900px.
Scroll down. Right-click -> Inspect -> in  the dev tools select the div with class "page", leave the pointer over that element. Notice that below the text "No HTML code needs to be changed" there's too much space inside that Grid item (element "main"), and that it's not cased eg by "margin" or "padding" values. (Perhaps it's the same size as the Grid gap?)

A stable copy of the page (in case the layout at the above URL changed and doesn't show the issue anymore) is at
https://tobireif.com/non_site_stuff/unfinished_grid_demo_copy_for_grid_span_bug_reports/ .



Actual results:

There is superfluous space at the bottom of the spanning Grid item "main".


Expected results:

The should be no superfluous space at the bottom of the spanning Grid item "main".

Comment 1

[Tobi Reif]

Same issue in Safari, Firefox. Seems to be OK in Edge.

The attached simplified test-case is by fantasai - thanks!

Comment 2

[Tobi Reif]

Attachment: screenshot_firefox.png

Comment 3

[Tobi Reif]

Screenshots of the issue in several browsers:
(Each browser window was set to a medium width so that the layout appears in which the issue occurs.)

Firefox:
https://app.crossbrowsertesting.com/public/ib8393c20a124bac/livetests/10284747/snapshots/z1ce3ac3f5b88fe30c52

Chrome:
https://app.crossbrowsertesting.com/public/ib8393c20a124bac/livetests/10284631/snapshots/z11754b1173ad93e2863

Safari:
https://app.crossbrowsertesting.com/public/ib8393c20a124bac/livetests/10284674/snapshots/z1343e3cf89987fc0db2

Seems OK in Edge?:
https://app.crossbrowsertesting.com/public/ib8393c20a124bac/livetests/10284744/snapshots/z261445e0327d014027f

Comment 4

[Tobi Reif]

Oops, the instructions for making the Grid inspector appear were for Chrome, but you sure know how to make the Grid inspectiobn overlay appear in Firefox :)

Also I mean to write:
Same issue in Chrome and Safari. Seems to be OK in Edge.

Comment 5

[Tobi Reif]

Reported the issue to several other browsers as well:

https://bugs.chromium.org/p/chromium/issues/detail?id=802021

https://bugs.webkit.org/show_bug.cgi?id=181645

Comment 6

[Tobi Reif]

I don't understand the test-case completely. If you have questions about the test-case, please ask fantasai.

My issue report again, in short:

When you open
https://tobireif.com/non_site_stuff/unfinished_grid_demo_copy_for_grid_span_bug_reports/ ,
set the window width to ~900px, and make the Grid boxes appear using the dev tools, you can see that there's too much space at the bottom of the spanning element "main" which is not caused by margin or padding - the superfluous space at the bottom of the Grid item / the larger-than-content height of the Grid item seems to be Grid-related.

Comment 7

[Tobi Reif]

The test-case has an issue, here's the new bug report:

https://bugzilla.mozilla.org/show_bug.cgi?id=1430757