Closed Bug 1673006 Opened 1 year ago Closed 1 year ago

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

Categories

(Core :: Layout: Flexbox, defect)

defect

Tracking

()

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

People

(Reporter: denschub, Assigned: mats)

References

Details

Attachments

(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
Status: NEW → ASSIGNED
Blocks: 1674268
Pushed by mpalmgren@mozilla.com:
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
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/26337 for changes under testing/web-platform/tests
Status: ASSIGNED → RESOLVED
Closed: 1 year ago
Resolution: --- → FIXED
Target Milestone: --- → 84 Branch
Duplicate of this bug: 1306403
Upstream PR merged by moz-wptsync-bot
You need to log in before you can comment on or make changes to this bug.