CSS content-visibility: auto inadvertently hides overflow

Question

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?

Answer 1

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.

Answer 2

content-visibility controls whether or not an element renders its contents at all, along with forcing a strong set of containments

auto: The element turns on layout containment, style containment, and paint containment.

Paint containment essentially clips the box to the padding edge of the principal box. There can be no visible overflow. The same things are true for paint containment as layout containment.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment

Therefore no; overflow will always be hidden when using content-visibility: auto (or contain: content which is shorthand for contain: layout style paint).

---

However, you could use contain-intrinsic-size

contain: size;
contain-intrinsic-size: <width> <height>;

...for some small performance gains, and have visible overflow.

Size containment does not offer much in the way of performance optimizations

---

Emphasis mine. Some more useful info here: https://web.dev/content-visibility/

Answer 3

If you are not sure what content-visibility really does, DO NOT use it!! For performance, contain is really sufficient enough for most cases.

contain has already been implemented as a standard in all modern browsers.

Using content-visibility will cause some troubles and unexpected results in runtime. Only chromium based browsers treat it as a standard but Firefox and Safari just treat it experimental feature or no support.

If you really want to use content-visibility, you have to specify the contain-intrinsic-size as well. You can combine ResizeObserver + IntersectionObserver + content-visibility + contain-intrinsic-size to make a prefect result, but it is just very stupid that Google made this stupid and buggy content-visibility.

The problem in Google's content-visibility is that, it does not recognize the rendered size. The browser does not know the correct sizing and thus give you the wrong sizing related to siblings and parent (if it is static/relative position).

The solution is that you use the observer to get the physical size of the element, then you assign the size to custom CSS property, then contain-intrinsic-size: auto var(--rendered-height), then you can use content-visibility: hidden or content-visibility: auto.

Therefore, please understand contain and just use contain precisely. contain: strict and contain: content are common applications.