Bug 181645 – Spanning Grid item has too much space at the bottom / is too high

• Component: Layout and Rendering
• Status: RESOLVED DUPLICATE

[Tobi Reif]

Created attachment 331329 [details]
Test-case by Fantasai - thanks!

Steps to reproduce the problem:

Open (the work-in-progress demo)
https://tobireif.com/demos/grid/ , 
set the viewport width to approximately 900px.
Scroll down. 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/ .

What is the expected behaviour?

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

What went wrong?

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

Same issue in Chrome and Firefox. Seems to be OK in Edge.

[Tobi Reif]

Created attachment 331330 [details]
screenshot of https://tobireif.com/demos/grid/ at medium size window

[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.)

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

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

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

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

[Tobi Reif]

Reported the issue to several other browsers as well:

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

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

[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, 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.

[Tobi Reif]

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

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

*** This bug has been marked as a duplicate of bug 181677 ***