[ajkjk]

Browser support aside, it seems very counterintuitive. https://developer.mozilla.org/en-US/docs/Web/CSS/contain suggests that it can cause pages to render differently, which is very strange, considering that the description implies that it only effects when the browser repaints/re-processes region, and not what the result is.

[shadowgovt]

"When" can definitely affect the end result if the page elements are arranged such that they break the rules implied by the contain logic.

For example, the `paint` rule implies that child elements have their renderable pixels completely within the containing parent. If the containing parent is moved off screen, computation of whether any of its children need to be painted is skipped. That will cause the child to vanish if it extends outside the parent.

[londons_explore]

Browsers give no control over when areas are repainted. If you change a bit of CSS or DOM, it will be repainted in the next frame. There is no way to say 'dont paint this yet'.

The thing the contain property does is ensure that a particular Dom change won't affect pixels outside the element involved, which means the browser won't need to do any extra repainting.

[extra88]

You can say “don’t paint this yet” if it’s not within the viewport. In addition to ‘contain’ there’s also ‘content-visibility’.

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