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