Hacker News Reader

Comment by lhecker | Hacker News Reader

I fiddled around with the code and I think I found the reason for the lags:

The "stylesheets/styles.css" file contains the following rule at the beginning:

  body {
    ...
    background: url('data:image/png;base64,...') fixed;
  }

If you remove the "fixed" attribute it's... fixed! (Oh, the irony...)

View on HN

Courtesy of https://fourword.fourkitchens.com/article/fix-scrolling-perf... , remove the fixed background and instead place it in its own layer with will-chance: transform.

  .wrapper::before {
    content: ' ';
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: url('data:image/png;base64,...');
    will-change: transform;
  }

Tested with Chrome dev tools, the repaint troubles disappear. Unfortunately only supported in Chrome, Firefox, and Opera. But just checked, and at least in Chrome the performance problem goes away with this solution even with the will-change removed. YMMV

That's a bit odd, what browser is this? The fixed background should be handled by compositor layers, and while it is certainly more expensive than having a scrolling background, I'm surprised it makes the experience unusable.

Unusable is a bit extreme a description but I also experience the comparatively slow scrolling. It's worse at the top of the page.

It's not a Mac thing like other commenters suspect---I'm on Linux, using Firefox.

Reply on news.ycombinator.com