Incorrect rendering of table [edit: when cells have display:inline-flex]
Categories
(Core :: Layout: Tables, defect)
Tracking
()
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
Comment 1•3 years ago
|
||
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.
Comment 2•3 years ago
|
||
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.
Comment 3•3 years ago
|
||
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.
Comment 4•3 years ago
|
||
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.
Comment 5•3 years ago
|
||
Comment 6•3 years ago
|
||
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).
Comment 7•3 years ago
|
||
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.
Comment 8•3 years ago
|
||
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.
Description
•