CSS content-visibility property and strange scrollbar behavior

user_1032490 0
Viewed 1012

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?

scrollbar css
1 Answers

You should mock up candidates for a design solution. A consequence of dynamic height is a variable scroll height.

  1. Re-design pages to group content categories in columns with tiles of a fixed size.
  2. Parse content after page load to set an accurate contain-intrinsic-size. This may not save 25ms on the first paint, but for the total session it may save time.
  3. Explore better applications for this user-level setting: apps using off-screen canvas, onion-skin type apps, scrollbar-agnostic touchscreens.
  4. Petition the W3C and browser vendors to resolve this matter appropriately.
user_41778520
Related