I looked at the new CSS property content-visibility
available on Google Chrome 85, and added it to my stylesheets to improve the rendering performance on my site:
.my-page-section {
content-visibility: auto;
}
The problem is with the scrollbar. When I drag the scrollbar from top to the bottom, it kind of "lags": the cursor reaches the bottom of the screen, but the scrollbar still is not at the bottom of the page. To get to the bottom of the page, I need to release the mouse, move it up, and drag the scrollbar down several times.
Reading the article linked above, I saw the contain-intrinsic-size
CSS property. Adding it with a reasonable value reduces the problem with the scrollbar, but it still happens. I think it is because my app generates dynamic content and no HTML div with the class "my-page-section" will have the same size:
.my-page-section {
content-visibility: auto;
contain-intrinsic-size: 250px;
}
My question is: how can I improve my page rendering performance with the content-visibility property, without getting in the way of our users that prefer to drag the scrollbar over using the mouse wheel?
MutationObserver
to change the property tocontent-visibility: visible
once it has been rendered, but I'm not sure how to setcontain-intrinsic-size
without good guessing