Feature proposal #8867
closed
Improve infinite scroll browser performance
Description
Implement the usage of the following CSS rules to shut off the rendering processing entirely for activity entries that are offscreen.
content-visibility: hidden;
contain-intrinsic-size: 0 500px;
Use contain-intrinsic-size to set the size. Best way to do this is probably set an inline style var then use the var in a CSS rule. When something is offscreen we just then need to apply the offscreen class and set the var style height based off the content height.
This is available in all major versions and it's non-breaking so if a browser doesn't support it it's fine and that browser will just have some less performance.
Updated by krileon almost 3 years ago
Also need to set content-visibility: auto; for below-the-fold rendering performance benefits. This allows the renderer to skip activity entries that aren't even visible. It will be important to set contain-intrinsic-size though, which means determining some kind of minimum height.
Updated by krileon almost 3 years ago
Only JS needed will be setting the height more specifically from the generic value. content-visibility: auto; itself will handle the visibility checks.
Updated by krileon over 1 year ago
- Status changed from Assigned to Resolved
- % Done changed from 0 to 100