| Summary: | Table flex-item inside inline-flex with column flex-direction does not recalculate size when tbody visibility is toggled | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | decademoon.bugzilla |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW --- | ||
| Severity: | Normal | CC: | ahmad.saleem792, bfulgham, dgrogan, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari Technology Preview | ||
| Hardware: | Mac (Apple Silicon) | ||
| OS: | macOS 13 | ||
Thank you for filing this bug. I am able to reproduce this all the way back to August last year (haven't tried anything older yet). (In reply to zalan from comment #1) > Thank you for filing this bug. I am able to reproduce this all the way back > to August last year (haven't tried anything older yet). Calling something similar to Shrink to Fit here - https://searchfox.org/wubkat/source/Source/WebCore/rendering/RenderFlexibleBox.cpp#626 or More like repainting issue of Table Cell to repaint? Just trying to understand for learning. :-) Able to reproduce on WebKit ToT (261699@main) as well. |
Consider the following document: <div class="flex-container"> <table> <thead> <tr> <th>col</th> </tr> </thead> <tbody> <tr> <td>the quick brown fox jumps over the lazy dog</td> </tr> </tbody> </table> </div> td { white-space: nowrap; } .flex-container { display: inline-flex; flex-direction: column; } If we toggle the visibility of the <tbody> (or remove the node) then the size of the table is not recalculated. Then, toggling the inline-flex style on the container div will force its size to be recalculated correctly. JsFiddle reproduction: https://jsfiddle.net/no4s7jhb/2/ Steps: 1. Click "toggle" to hide the tbody. Table size stays the same. 2. Click "force layout" and observe that the table size is recalculated. Occurs in Safari Technology Preview 16.4 (and probably earlier). Chrome 110 and Firefox 110 recalculate the table size correctly.