I'm trying to implement a simple tabs component in a single-page app. The selected tab should (obviously) display its contents while unselected tabs keep their content available but hidden. How should I hide the content on the unselected tabs?
Each of the canonical techniques for hiding content has issues:
| technique | drawback |
|---|---|
opacity: 0 |
User can still potentially interact with invisible content. Breaks if a sub-element of the tab element sets the opacity property. |
color: transparent, background: transparent |
Same issues as above. |
display: none |
Component on unselected tabs is loaded in a div with no dimensions, which in my experience causes rendering issues when that content is later displayed. (Several React libraries I'm using do not properly calculate inner dimensions of columns or whatnot when they're initially rendered in a display: none div and later displayed.) |
visibility: hidden |
Still takes up room on the page. Breaks if some sub-element of the tab element sets the visibility property. |
To sum up: I want to know how to render content as if it's actually loading on the page (i.e., with the proper dimensions), but completely invisibly, with no space reserved for it on the page and with no possibility of user interaction. Ideally, the solution should be agnostic to whatever CSS properties are set on the arbitrary component within the tab itself; i.e., the CSS inside the tab content should not be able to break the display of the tabs themselves. Is there some recommended combination of CSS properties (visibility, opacity, display, position, z-index, etc.) that does what I want here?