Jittery Scrolling

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.

Leave a Comment