1558512 - [css-grid-2] text sometimes overflows into grid-gap when using subgrid

Status: VERIFIED WORKSFORME

(Core :: Layout: Grid, defect, P3)

Description

[ronny.siikaluoma]

Attachment: subgrid text overflow.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:69.0) Gecko/20100101 Firefox/69.0

Steps to reproduce:

I've played around with subgrid in FF Nightly (69.0a1), and found a weird bug/behavior regarding subgrid and text overflowing into the gap area.

Actual results:

It seems that text is sometimes flowing into the grid-gap (of parent grid) when using subgrid.

This depends on the width of the element and how the current text breaks to fit words, I've made a simplified example based on Rachel's card demo using subgrid.

Here I've set a hard with on the .cards element to 489px.
The text (red) in the header of the second card flows into the inherited gap of the parent grid.

If the width of .cards is set to 488px or 493px, the text "pops into place" respecting the gap.

This behavior is also very easy to spot if .cards is set to 100%, and using the responsive feature in FF to resize the screen. Text will occasionally overflow into the gap (depending of the width of the card and the length of the containing text.

https://codepen.io/siiron/pen/dByrZG?editors=1100

Expected results:

I expect the text to not overflow into the gap area, but always be contained in the cell.

Comment 1

[Liviu Seplecan]

Hi @ronny.siikaluoma tested the issue and here is the results:
[Platform affected]: Windows 10, Mac OS X, Ubuntu 18.04
[FF versions]: latest nightly 69.0a1, beta 68.0b11, release 67.0.3
-the issue can be reproduced / I will set a component for it.

after a moz-regression testing:
1st good: build_date: 2018-12-21
changeset: b23630094b9cb8024841d9af91fab40367ac4a82
pushlog_url: https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=b23630094b9cb8024841d9af91fab40367ac4a82&tochange=9b4c8fb46d850db196b0ed6aad0a35b85b178745

last bad: build_date: 2019-05-27
changeset: 29c76bc4b5901f6fd331435e6db5ff47bcde04bb
pushlog_url: https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=1e3244e602fc0373508049b6fe544332f800f033&tochange=29c76bc4b5901f6fd331435e6db5ff47bcde04bb

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The priority flag is not set for this bug.
:mats, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 3

[Mats Palmgren (inactive)]

Ronny, the testcase seems to work fine for me in a recent Nightly build on Linux.
Please try again and see if you still can reproduce the bug? Thanks.
https://nightly.mozilla.org/

Comment 4

[Mats Palmgren (inactive)]

Liviu, perhaps you could try again as well?

Comment 5

[ronny.siikaluoma]

(In reply to Mats Palmgren (:mats) from comment #3)

Ronny, the testcase seems to work fine for me in a recent Nightly build on Linux.
Please try again and see if you still can reproduce the bug? Thanks.
https://nightly.mozilla.org/

I've re-tested this issue in FF Nightly 71.0a1 (2019-09-09) on Windows 10 and can no longer reproduce the error.
It seems ok now :-)

Comment 6

[Liviu Seplecan]

Hi @Mats Palmgren, I've checked again the issue on latest nightly 71.0a1, beta 70.0b4, release 69.0 - cannot reproduce it. As well, WFM.

Comment 7

[Mats Palmgren (inactive)]

Ronny and Liviu - thanks for testing!