1832258 - Fixed table layout having wrong recomputed dimensions after interactive CSS changes

Status: NEW

(Core :: Layout: Tables, defect)

Description

[Denilson Figueiredo de Sá]

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

Steps to reproduce:

1. Go to http://denilsonsa.github.io/gimp-palettes/index.html (For easy comparison, open it twice, in two tabs.)
2. Observe how the palettes of colors are made of <table> with "table-layout: fixed; border-collapse: collapse;" and each color is a <td> with 8px size and no border.
3. Click on the little checkbox "Border". This will add one CSS class ".with-border", which will cause the <td> elements to shrink to 7px while adding a 1px border.
4. Observe how checking this checkbox doesn't change the dimensions of anything.
5. Now un-check the "Border" checkbox, to remove the borders.
6. BUG!

Actual results:

The <td> elements have now increased to 9px, instead of staying at 8px. Everything shifted around to accommodate this layout change.

This bug is restricted to Firefox (Gecko), as it works fine without issues in Chrome.

Expected results:

The table should have been recomputed to the exact same dimensions as during the initial load. (Quickly switch between the two open tabs to observe the difference.)

BONUS: If I manually go to the element inspector and disable "table-layout: fixed" and then enable it again, the table cells will be restored to the right dimensions.

Comment 1

[Denilson Figueiredo de Sá]

I've created a minimal testcase that reproduces this bug:
https://codepen.io/denilsonsa/pen/PoyRMJp

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

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

Comment 3

[Denilson Figueiredo de Sá]

FYI, the URL in the original post does not trigger the bug anymore, due to changes to the CSS. Please follow the URL in the first comment, or browse an older version of that page.
https://github.com/denilsonsa/gimp-palettes/blob/0e1cac394e864321f8830dddb24bac35d3cc7b48/index.html
https://github.com/denilsonsa/gimp-palettes/commit/2fd3745eea76c874c280e40890b98c2d48fbc465