1461852 - Firefox honors small heights on <td> (for sizing of that <td> and percent resolution on children), unlike other browsers

Status: NEW

(Core :: Layout: Tables, enhancement, P3)

Comment 1

[Emilio Cobos Álvarez (:emilio)]

Attachment: testcase

Comment 2

[Emilio Cobos Álvarez (:emilio)]

It's not clear to me what's the right behavior here... Slightly related to bug 1421660.

Comment 3

[Boris Zbarsky [:bzbarsky]]

The right behavior is for the CSS WG to get off its behind and spec tables?  ;)

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: testcase 2: two rows, with table contents div having 50% height

Comment 5

[Daniel Holbert [:dholbert]]

Clarifying summary -- all browsers *do* resolve percent heights against in <td> against that <td>, it seems (as shown in attached testcase 2, which has 2 rows with 50%-height-child in each row).

The key difference is whether or not they honor a tiny height **on the <td>**.  Firefox does honor the tiny cell height (and uses it for percent resolution).  In contrast, other browsers (Chrome/Safari/Edge) seem to use the cell's content-box as a lower-bound on the cell's height (so, they have a nonzero-height green box for each table cell) -- and then, they resolve percentages against that cell height.

So, it seems everyone agrees on resolving percentages against the cell height -- it's just a disagreement on how to determine the cell height.

Comment 6

[Boris Zbarsky [:bzbarsky]]

The "other browsers" behavior of using a height on <td> to just set a minimum height for the row is the one the spec calls for.  Pretty sure we have existing bugs tracking that....

Comment 7

[Emilio Cobos Álvarez (:emilio)]

A volunteer reported to me a broken site (https://www.shopback.com.tw/) which happened to be broken because of this.

Comment 8

[Thomas Wisniewski [:twisniewski]]

This is breaking the layout at https://www.91mobiles.com/compare/realme/9+SE+5G/vs/Moto/G72-amp, as reported at https://webcompat.com/issues/117029 , causing all sorts of lapping content.

This is the key CSS:

#fixed-table tr {
  height: 1px;
}
#fixed-table tr td {
  height: inherit;
}
#fixed-table tr td .cmp-summary-box { // a div, only child of the td
  height: 100%;
}

Comment 9

[Dennis Schubert [:denschub]]

Moving away the Site Breakage dependencies. Sorry for the bugspam, I'll only do one change per core bug for the next issue. :)

Comment 10

[Calin Tanase]

This is still reproducible based on the test case on both Firefox Release and Nightly. (not reproducible on Chrome)

Environment:
Operating system: Windows 10
Browsers tested: Firefox Nightly 128.0a1 (2024-05-28) / Firefox Release 126 / Chrome 125.0.6422.113

Comment 11

[Daniel Holbert [:dholbert]]

I'm tentatively planning to look at this bug soon (if no one gets to it first). ni=me as a reminder.