4 ms·

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

lucideer 11y ago
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)
- manojlds 11y ago
  I get the lag too. MBP 15" Late 2014.
  - Killswitch 11y ago
    No lag here, Mid 2015 MBP 15" driving 2 27" Thunderbolts.
- userbinator 11y ago
  There's also this script: http://htty.github.io/htty/javascripts/scale.fix.js 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...
- ryanlol 11y ago
  Definitely lagging here, brand new 12" macbook running chrome.
lhecker 11y ago
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...)
- TD-Linux 11y ago
  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 11y ago
    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.
- developer1 11y ago
  Courtesy of https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property 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
archimedespi 11y ago
I think it's a mac thing, at least partially - no lag on Windows running Chrome or Linux running Firefox.

lucideer 11y ago

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)

manojlds 11y ago
I get the lag too. MBP 15" Late 2014.
- Killswitch 11y ago
  No lag here, Mid 2015 MBP 15" driving 2 27" Thunderbolts.
userbinator 11y ago
There's also this script: http://htty.github.io/htty/javascripts/scale.fix.js 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...
ryanlol 11y ago
Definitely lagging here, brand new 12" macbook running chrome.

lhecker 11y ago

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

TD-Linux 11y ago
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 11y ago
  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.
developer1 11y ago
Courtesy of https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property 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

archimedespi 11y ago

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