Bug 253928 – Table flex-item inside inline-flex with column flex-direction does not recalculate size when tbody visibility is toggled

• Component: Layout and Rendering
• Status: RESOLVED CONFIGURATION CHANGED

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.

[alan]

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).

[Ahmad Saleem]

(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.

[Radar WebKit Bug Importer]

<rdar://problem/107035123>

[Ahmad Saleem]

I am not able to reproduce this anymore on Safari 26.2 Beta. @Alan - should we close this?

[Ahmad Saleem]

I am marking this as `Configuration Changed`, please reopen, if it still reproduces.