'The `auto` mode of `contain-intrinsic-height` isn't remembering discovered element heights?

In this simple jsbin example, I have code that looks like this:

<style>
  div {
    content-visibility: auto;
    contain-intrinsic-height: auto 10px;
  }
</style>
<div>a<br>a<br>a</div>
<div>a<br>a<br>a</div>
<div>a<br>a<br>a</div>
...

I've set the height to 10px, but the actual heights of the divs are larger.

I'd assumed that this would mean that there is weird scrollbar resizing as the user scrolls down the page, but not when they scroll back up - since the browser has already discovered and remembered the heights of the elements that are being scrolled past on the way back up.

However, that doesn't appear to be the case. In Chrome (v100) there is scrollbar resizing on the way down and up, just as if I had not added the auto option.

The auto value is mentioned here, and they only mention Chrome support for contain-intrinsic-size auto, rather than the individual height and width options, but the size version doesn't work either. So I assume they just mentioned contain-intrinsic-size as a catch-all.

htmlcss


Solution 1:[1]

Turns out that this was a Chromium bug that will be fixed in Chrome v102: https://bugs.chromium.org/p/chromium/issues/detail?id=1318726#c4

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 joe

Related Questions