Tab-item is modifying .html files

[ramibd]

Describe the bug

I'm making a sphinx web page to post work reports, mostly plotly HTML charts. I used .. raw:: html to add the graphs into my .rst file. Now, for better visualization purposes, I'm grouping my charts using sphinx-design tabs property.

Code:

.. tab-set::

   .. tab-item:: Level SA

      .. raw:: html

        <div style="text-align: center;">
        <iframe src="PATH\chart.html" style="border: none; width: 1005px; height: 450px"></iframe>
        </div> 

   .. tab-item:: MoM SA

      .. raw:: html

        <div style="text-align: center;">
        <iframe src="PATH\chart.html" style="border: none; width: 1005px; height: 450px"></iframe>
        </div> 

At first it worked, but then I started having issues with overlapping legends and problems on other features. This doesnt happen when i'm on the first layer of the tabs, only when i got to other layers. Also, if i refresh the web page while, for exemple, the second layer is selected, the error doesnt occur.

HTML on the first layer:

HTML on the second layer:

I tried swapping to sphinx-tabs, instead of sphinx-design, but the same happened. I also tried modifying the _static\tabs.css file, but couldn't figure out where the problem comes from. Does any one knows if there is a way to bypass this behavior?

Reproduce the bug

.Create a tab-set

.Add mutiple tab-item

.Use .. raw:: html to embed a html file in each tab-item

List your environment

No response

[ramibd]

I tested a bunch but couldnt make it work. Now i know that the problem is not the plot's height/width compared to it's parent container. I think it might be in the rendering of the html wile the tab isn't selected, because if i select a tab with error while the page is loading, the selected tab gets normalized and the normal ano presents the issue.