How is TabPanel working exactly?

[isoroka-plana]

We recently encountered a strange bug in our app after a Chromium update. The issue happens with a div element that has container-type: inline-size applied, inside of which we have TabPanels (part of a tab interface). This setup is placed within a Dialog. In Chromium-based browsers (like Chrome), when switching from a later tab to an earlier one, the screen flickers white or freezes until the window is resized. This behavior is not observed in Firefox or Safari, which handle it just fine.

Through debugging, I traced the issue to a combination of two CSS properties:

container-type: inline-size on the container div.
position: fixed on inactive TabPanel.

Interestingly, the problem only occurs during certain DOM updates, such as switching tabs. Removing either of the two properties (container-type or position: fixed) resolves the issue, but both together cause the flickering or freezing.

The mystery:

I've noticed that inactive TabPanel's are rendered as an empty <span> with tabindex="-1" and position: fixed. My questions are:

• Why are inactive tabs rendered as fixed-position, empty <span> elements with tabindex="-1"?
• What purpose does tabindex serve on TabPanel at all?
• Is the position: fixed necessary? Could we hide inactive tabs in another way, or prevent them from rendering entirely when they're not active?

According to the documentation, the reasoning behind this setup isn't clear. However, removing the position: fixed on these spans does seem to fix the issue on Chromium without any visible side effects.

While I'm not sure if this is a Chromium bug or regression, it does feel like the way these inactive tabs are handled might be overly complex, and simplifying it could prevent the white screen problem.