5

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?

2
  • I'm wondering this too. Thinking of going down the route of a MutationObserver to change the property to content-visibility: visible once it has been rendered, but I'm not sure how to set contain-intrinsic-size without good guessing Sep 24, 2020 at 6:29
  • 1
    This is a common issue with lazy loading and rendering content in a page. The reality is the scrollbar size and the position of the thumb is a % of the height to represent where the content is respective to the page height. When additional content is rendered the height changes, thus the thumb will jump. I don't think the average user will notice or care. So I would not worry about it.
    – Chris Love
    Sep 26, 2020 at 18:35

1 Answer 1

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.