Closed Bug 1673006 Opened 4 years ago Closed 4 years ago

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


(Core :: Layout: Flexbox, defect)




84 Branch
Webcompat Priority ?
Tracking Status
firefox84 --- fixed


(Reporter: denschub, Assigned: MatsPalmgren_bugz)




(4 files)

Attached file 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?

Webcompat Priority: --- → ?

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

Component: Layout → Layout: Flexbox

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)
Attached file 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.

Attached patch WIPSplinter Review

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

Assignee: nobody → mats
Severity: -- → S3
Blocks: 1674268
Pushed by
[css-flexbox] Propagate the flex-shrink/flex-grow/flex-basis style to the table-wrapper box.  r=emilio
Created web-platform-tests PR for changes under testing/web-platform/tests
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → 84 Branch
Upstream PR merged by moz-wptsync-bot
You need to log in before you can comment on or make changes to this bug.