1673006 - Incorrect position/offset for display: table; elements inside flex with width: 100%;

Status: RESOLVED FIXED

(Core :: Layout: Flexbox, defect)

Description

[Dennis Schubert [:denschub]]

Attachment: Testcase

Attached is a testcase that renders differently in Chrome and Firefox. In Chrome, the three div.slide elements are placed next to each other, as it's probably expected here. In Firefox, however, the child elements do overlap.

I'm not quite sure what's going on here, and I also don't know if this is a table bug, a flexbox bug, or something else, so I'm filing this into Core::Layout. Maybe this is related to bug 1454330?

Comment 1

[Hiroyuki Ikezoe (:hiro)]

I am totally unsure whether this is a bug in Firefox or in Chrome. Ting-Yu?

Comment 2

[Karl Dubost💡 :karlcow]

fwiw, the boxes are positioned exactly the same in firefox and chrome. (margin, width, position from the edge, etc.) BUT the rendering is different. So I have the feeling it looks like a rendering issue.

Tested in

• Chrome Canary Version 88.0.4303.0 (Build officiel) canary (x86_64)
• Firefox Nightly 84.0a1 (2020-10-22) (64-bit)

Comment 3

[Mats Palmgren (inactive)]

Attachment: Testcase #2

Here's a somewhat simplified version of the first testcase.
If I dump out the frame tree for this test I see that the TableWrapper frame is ~66.667px and the Table frame is 200px wide. It seems wrong to me that they differ in this case.

If you select one of the flex items (.slide) in DevTools it says the base size is 200px, flexibility is -133.33px, and final size is 66.67px. However, if I change the items to have display:block then it just says base size: 200px, and final size: 200px. So it seems we do something special for tables here that Chrome doesn't do.

Comment 4

[Mats Palmgren (inactive)]

Attachment: WIP

It seems we're simply not propagating the flex-shrink style to the table wrapper. If I add these then we render the testcase the same as Chrome.

Adding flex-basis also fixes bug 1454330 for the most part - we now render it the same if the window is narrow, but the items doesn't stretch the same when the window is very wide, so it seems there is some additional issue there (assuming Chrome is correct that is).

Comment 5

[Mats Palmgren (inactive)]

Attachment: Bug 1673006 - [css-flexbox] Propagate the flex-shrink/flex-grow/flex-basis style to the table-wrapper box. r=emilio

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/3d070126964f
[css-flexbox] Propagate the flex-shrink/flex-grow/flex-basis style to the table-wrapper box.  r=emilio

Comment 7

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

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

Comment 8

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/3d070126964f

Comment 10

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

Upstream PR merged by moz-wptsync-bot