1492315 - table cells grow on resize when the table is a child of display grid

Status: RESOLVED FIXED

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

Description

[Sunny Walker]

Attachment: firefox62-table-display-grid.mp4

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

Steps to reproduce:

In an HTML document, I have a table as a child of an element with display:grid. I tried on FF62 Mac and FF62 Win10 both with and without add-ons disabled. The HTML code is available on https://codepen.io/kamakalolii/pen/GXwYmm/?editors=1100


Actual results:

The table will not properly show any table CSS margins and the cells will grow vertically when the viewport is resized (in either X direction).


Expected results:

The margins should properly show and the table should not vertically resize.

Comment 1

[Mats Palmgren (inactive)]

Attachment: Reduced testcase

It seems a non-zero margin on the table is required for the bug to appear.
Its height grows by that amount on each reflow for some reason.

Comment 4

[php.1990]

Similar behaviour is observed when display:table is assigned to a child within an element with display:grid. If child has some margin applied, it vertically grows by the margin amount whenever any DOM Manipulation occurs.
Can be reproduced at JSFiddle - https://jsfiddle.net/12tjpcx3/15/
Observed on FF 66/Win 7.

Comment 5

[Ian]

I can corroborate that having a table with a non-zero margin as a child of an element with display: grid causes the unexpected padding on table cells.

Remove either of these conditions and tables appear as normal; For now I am simply removing the margins around my tables.

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

Comment 7

[Josh Carpenter]

Another demo: https://jsfiddle.net/4wcg6d7f/7/

Comment 8

[Josh Carpenter]

Attachment: firefox-grid-table-bug.gif

Comment 9

[Daniel Holbert [:dholbert]]

Josh, I think your issue is unrelated to this one, and table { justify-self: start } should work around it (if your goal is for the table to only be as wide as its content.

(Your issue is just showing that elements inside of a grid will stretch to fill their grid cell, by default; and Chrome (version 80 "dev" at least) matches us on your jsfiddle, so there's no clear Firefox-specific issue/behavior being demonstrated there, unless I'm missing something.)

Comment 10

[Daniel Holbert [:dholbert]]

(Ah, sorry - it looks like Josh's testcase shows a version of this bug after all. I was over-pivoting on the width growing/shrinking in the testcase and didn't notice the subtle vertical margin change. I'll go ahead and mark comment 9 as obsolete.)

Comment 11

[Daniel Holbert [:dholbert]]

Here's a reduced version of Josh's testcase, comparing table-in-a-grid (left) vs. table-in-a-block (right): https://jsfiddle.net/dholbert/64ge85kd/

Comment 12

[Emilio Cobos Álvarez (:emilio)]

This is happening in https://drafts.csswg.org/css-align/#overview too for example.

Comment 14

[Sean Voisen (:svoisen)]

Also happening on https://w3c.github.io/ServiceWorker/#dom-serviceworkerregistration-onupdatefound when hovering the link "updatefound" per this Twitter thread: https://twitter.com/fantasai/status/1230029207591194624?s=20

Given the number of dupes, putting this as a candidate for our more near-term quality backlog.

Comment 15

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1492315 - Subtract table grid item margins correctly. r=mats

Otherwise we do the wrong thing for incremental layout.

Comment 16

[Emilio Cobos Álvarez (:emilio)]

Sorry, I just forgot about this.

Comment 17

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d91c407d4ccc
Subtract table grid item margins correctly. r=mats

Comment 18

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/21940 for changes under testing/web-platform/tests

Comment 19

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.

Comment 20

[Cristina Coroiu [:ccoroiu]]

https://hg.mozilla.org/mozilla-central/rev/d91c407d4ccc

Comment 21

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot