[Filligree]

Looks cool, but—

The website lags on my laptop. Scrolling lags. Why does scrolling lag? How?

What's going on with the internet these days...

[lhecker]

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...)

[developer1]

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

[TD-Linux]

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.

[slrz]

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.

[lucideer]

There's no javascript on the page at all (with the exception of two IE-compat scripts). The CSS also looks tame enough - a data uri, -webkit-font-smoothing and one Google web font are the only vaguely notable things.

Could be a browser bug on your system? (I see no lag of any kind)

[userbinator]

There's also this script:

http://htty.github.io/htty/javascripts/scale.fix.js

which appears to add a 'gesturestart' event, and a weird conditional comment at the bottom that shouldn't appear for non-IE, but whose condition is to explicitly run the function defined in that script in non-IE browsers...

[manojlds]

I get the lag too. MBP 15" Late 2014.

[Killswitch]

No lag here, Mid 2015 MBP 15" driving 2 27" Thunderbolts.

[ryanlol]

Definitely lagging here, brand new 12" macbook running chrome.

[archimedespi]

I think it's a mac thing, at least partially - no lag on Windows running Chrome or Linux running Firefox.