Closed Bug 1701447 Opened 8 months ago Closed 8 months ago

Two side-by-side tables - first rows have different heights in Firefox, same heights in Chrome

Categories

(Core :: Layout: Flexbox, defect)

Firefox 87
defect

Tracking

()

RESOLVED INVALID
Tracking Status
firefox-esr78 --- unaffected
firefox86 --- unaffected

People

(Reporter: vinay_sajip, Unassigned)

References

(Regression)

Details

Attachments

(3 files)

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:87.0) Gecko/20100101 Firefox/87.0

Steps to reproduce:

Viewed this page: https://m.saraswat.org.uk/sounds_bug.html in both Firefox 87.0 and Chromium 89.0.4389.90 - the appearance was different in the two browsers.

Actual results:

The page contains two tables, side-by side. One table starts like this:

<table class="letter-table table-bordered table-striped">
<tbody><tr><th colspan="8">Vowels</th></tr>

The other starts like this:

<table class="letter-table table-bordered table-striped">
<tbody><tr><th colspan="20">Consonants</th></tr>

The rows have the same height in Chromium, but unequal heights in Firefox.

Expected results:

The rows should have the same height in Firefox.

Has Regression Range: --- → yes
Has STR: --- → yes
Component: Untriaged → Layout: Flexbox
Product: Firefox → Core
Regressed by: 1674302

Chrome 91 dev agrees with Firefox's rendering.

This new behavior was an intentional change that Firefox and Chrome both made, to align with the spec (and to remove a special quirky thing that only happened for tables, and was really an accident/bug).

If you want the old behavior back, you can add align-self:flex-start to the table elements in your testcase; that explicitly prevents them from stretching.

Status: UNCONFIRMED → RESOLVED
Closed: 8 months ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.