Closed Bug 1717101 Opened 3 years ago Closed 3 years ago

Incorrect rendering of table [edit: when cells have display:inline-flex]

Categories

(Core :: Layout: Tables, defect)

Firefox 89
defect

Tracking

()

RESOLVED DUPLICATE of bug 1452870

People

(Reporter: mhangoyewoh, Unassigned)

Details

Attachments

(3 files)

User Agent: Mozilla/5.0 (Linux; Android 6.0.1; SM-J700H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.105 Mobile Safari/537.36 OPR/63.3.3216.58675

Steps to reproduce:

I was writing the browser-based calculator program that can be found here: https://yewomhango.github.io/scientificCalculatorJS/index.html . I was using Firefox Developer Edition to view changes while writing it. In the code there are two <table> elements, which appear either side-by-side or one on top of the other, depending on the screen-size.

Actual results:

The last <td> element in each row of each table does not appear in the same row as the others, instead being pushed behind the first element in the next row. Also, when I open the developer tools, there appear to be strange "whitespace" (whitespace-only text node) elements between the first and second and between the second and third elements in each row.

Expected results:

Each table is 4×4 boxes in size and when rendered properly, they should look like one seemless 8×4 table, reaching to the bottom of the screen. This is how Chrome, Edge and other Chromium based browsers render it. Those browsers also do not show any of those strange "whitespace" elements

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Tables' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Component: Untriaged → Layout: Tables
Product: Firefox → Core

This seems to be caused by the use of display: inline-flex on the <td> cells; looks like we may be mishandling that combination, although I'm not really familiar with how this should interact. Maybe Daniel can take a look sometime.

Severity: -- → S3
Flags: needinfo?(dholbert)
Summary: Incorrect rendering of table → Incorrect rendering of table [edit: when cells have display:inline-flex]

I think this is a Chrome bug, not a Firefox bug.

Good news is there's a trivial workaround to make the two browsers behave consistently (I think): just remove the whitespace between your td elements, and you should get the expected rendering in Firefox.

That whitespace is taking up space -- it's part of an inline rendering context line, since it's inside of an anonymous table cell (an anonymous cell that gets generated to contain the not-actually-table-cell <td style="display:inline-flex"> elements). The whitespace produces a space character, just as it would in a regular block. And the collective width of all the stuff on the line line is wider than the container -- the width is 25% + 25% + 25% + 25% + the width of 3 space characters.

Chrome agrees with our rendering on slightly-different testcases (wrapping the 4th box to its own line), but they happen to produce the author's expected results in this testcase, which as I noted above I think is a Chrome bug. I'll try to get to the bottom of it and file a bug and link to it here.

Status: UNCONFIRMED → RESOLVED
Closed: 3 years ago
Flags: needinfo?(dholbert)
Resolution: --- → INVALID

Also, this happens with any inline-* status on the inner elements -- it's not specific to inline-flex. I'll attach a reduced testcase that uses inline-block for a bit more simplicity.

Here's a modified version of the testcase where I swapped the td elements for span elements and wrapped them in an explicit table-cell. I think this is meant to be basically-equivalent to the previous testcase, but chrome treats it differently (matching Firefox & wrapping).

Here's a testcase that highlights the Chrome issue here. They're behaving differently depending on whether there's an explicit table cell vs. an anonymous one (i.e. an anonymous wrapper box with display:table-cell that the browser has to generate to contain the non-table stuff that a web page has put inside of a table).

These two cases should behave the same, so this is definitely a Chrome bug.

Looks like this is the same as bug 1452870, which is linked to https://bugs.chromium.org/p/chromium/issues/detail?id=694374 , which is tracking the Chromium issue here.

--> updating resolution to flag this as a duplicate.

Resolution: INVALID → DUPLICATE
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: