<!DOCTYPE html>
<div style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;">
<div>top</div>
<div id="container" style="height: 100%; overflow: auto;">
<div>
<div>
<div style="position: absolute; left: 0px; right: 0px;">
<div style="overflow: auto; background-color: pink">
<div style="height: 1000000px"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function forceLayout() {
container.style.fontSize = '12px';
document.documentElement.offsetHeight;
}
requestAnimationFrame(()=> {
container.style.contain = 'strict';
// At this point the paint containment is applied. So the pink doesn't
// exceed the bounds of the container, but layout containment isn't until
// something else dirties layout.
// Commenting this line in causes the correct layout to be forced.
// requestAnimationFrame(forceLayout);
});
</script>
Comment 1 by e...@chromium.org
, Oct 21Labels: OS-Android OS-Chrome OS-Fuchsia OS-Linux OS-Windows
Status: Available (was: Untriaged)
Summary: Setting css contain w/script doesn't trigger layout (was: contain:strict doesn't correclty dirtly layout)