After experimenting with the latest CSS property called content-visibility introduced in Google Chrome 85, I implemented it in my stylesheets to boost the rendering performance of my website:
.my-page-section {
content-visibility: auto;
}
However, a peculiar issue arose with the scrollbar. When scrolling from top to bottom, there is a noticeable "lag": the cursor reaches the screen's bottom before the scrollbar aligns with the page's end. Releasing the mouse and repeating the scroll motion multiple times is necessary to reach the bottom.
Upon further investigation detailed in the linked article, I discovered the contain-intrinsic-size CSS property. Setting it to a suitable value mitigated the scrollbar problem to some extent, but the issue persists. This persistence could stem from the fact that my application generates dynamic content, resulting in varying sizes for HTML div elements assigned the "my-page-section" class:
.my-page-section {
content-visibility: auto;
contain-intrinsic-size: 250px;
}
My query remains: how can I leverage the content-visibility property to enhance page rendering performance while ensuring seamless scrollbar usage for users who prefer manual scrolling over mouse wheel navigation?