What: Jittery Scrolling, or very slow scrolling in Chrome-based browsers. It’s caused by too many paint operations when scrolling, in my particular case caused by an SVG set as a background-image with background-size: cover and background-attachment: fixed.
How: Remove the background-attachment: fixed and use a pseudo-element with position: fixed and will-change: transform, like so:
body {
min-height: 100vh;
position: relative;
}
body::before {
background-image: background.svg;
background-size: cover;
content: "";
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
will-change: transform;
z-index: -1;
}Where: Blog post at Four Kitchens with links to more information.
Thoughts: It feels like a complete hack to me that I have to use a pseudo-element to use position: fixed with a 40kb SVG image to get Chrome to scroll normally. What it feels like is regression. More and more Chrome just really does not seem like a particularly good browser to me and I don’t understand why people like it so much.
Photo Credit: Photo of an abandoned train in Garibaldi Oregon. By me.