| Thanks for the explanation. Regarding `overflow: paint`: In <https://www.w3.org/TR/css-contain-1/#containment-paint> it says: > ... This does not include the creation of any mechanism to access or indicate the presence of the clipped content; nor does it inhibit the creation of any such mechanism through other properties, such as overflow, resize, or text-overflow. This is as if overflow: visible was changed to overflow: clip at used value. That seems to imply that `overflow: hidden` could still be used with `contain: size` to "access" clipped content. And still I don't see how the optimizations they list are not available with `overflow`. BTW, I think it's unfortunate that the MDN article introduces `contain` as if it were a hint... > This information is something that is usually known, and in fact quite obvious, to the web developer creating the page. However browsers cannot guess at your intent ... ... when actually it modifies layout and display behavior, overriding other properties. |
Ah, you're right. This changed at some point in the history of this property, and I was remembering the old version.
> And still I don't see how the optimizations they list are not available with `overflow`.
Here's one: Setting overflow to something other than visible doesn't cause the element to be a containing block for absolutely positioned children, so they can escape. https://jsbin.com/wesirup/edit?html,css,output
Here's another one: stacking contexts are weird https://jsbin.com/hepiqof/edit?html,css,output css-contain:paint puts sensible boundaries.
> BTW, I think it's unfortunate that the MDN article introduces `contain` as if it were a hint... ...when actually it modifies layout and display behavior, overriding other properties.
Agreed.