1660384 - (css-content-visibility) Implement CSS Containment content-visibility

Status: NEW

(Core :: Layout, enhancement)

Description

[Karl Dubost💡 :karlcow]

https://drafts.csswg.org/css-contain-2/#content-visibility

The content-visibility property controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed.

.somecontent {content-visibility: visible}
.somecontent {content-visibility: hidden}
.somecontent {content-visibility: auto}

See https://web.dev/content-visibility/

At this date, only implemented in Chromium 85
https://www.chromestatus.com/feature/4613920211861504
https://bugs.chromium.org/p/chromium/issues/detail?id=882663

no visible bug on Safari yet.
https://bugs.webkit.org/buglist.cgi?quicksearch=content-visibility

Note:

• Opening as a placeholder for this property.
• And in case we see webcompat issue in the future. (none yet)

Comment 1

[Andry Zirka]

Hi. I get bug with content-visibility:auto; for svg element in div. If img with svg more than block with property content-visibility:auto; img with svg would cropped

Comment 2

[Emilio Cobos Álvarez (:emilio)]

We don't implement this property, are you having this bug with Firefox or Chromium-based browsers? Could you attach a test-case?

Comment 3

[Andry Zirka]

Yes, I can show you.
https://drive.google.com/file/d/1OJVQZbMnoWyBN0atdprkH8BA8DMiRC0M/view?usp=sharing
http://prntscr.com/unxed2

• It's my test work =) Sorry, I don't know how else I can show you an error. You will see this error if you open file index.html.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

That only happens in Chrome as expected, so this is not the correct bug tracker to report it, that's https://crbug.com. But the bug is invalid, the icon is overflowing the content-visibility: auto element. It behaves like contain: paint.

Comment 7

[Yong Su]

Hi, is there a timeline for supporting this feature?