CSS content-visibility: auto inadvertently hides overflow

user_2946938 0
Viewed 157

I'm finally getting around to implementing content-visibility: auto in my project to improve render times and general performance. I have a component that has some inset on the page but, under certain conditions, I allow the children of the component to overflow out of the container to make the component full bleed.

Now, when I try to add content-visibility: auto to this parent component, my component gets cut off at the inset boundary of the parent (it is effectively acting like overflow: hidden). I've tried adding overflow: visible to my styles which is having no effect at all.

Codepen example (Uncomment the content-visibility line to see the issue; you will need Chrome for content-visibility support)

Can I use content-visibility: auto without having my overflow hidden?

css-contain reactjs css html
1 Answers

I am not good at English so this answer is through the translate engine. Sorry if you can not understand this answer.
And this answer is includes my speculation.

The contains-visibility: auto; document states.

Turns on layout containment, style containment, and paint containment for the element.

So If you add contains-visibility: auto;, you will see that layout containment , style containment , and paint containment are turned on. Since these containments indicate that outside of the element not render, so I think that overflow: visible did not work.

Can I use content-visibility: auto without having my overflow hidden?

As far as I tried, it could not be done.

user_125150140
Related