Matt Litzinger Matt Litzinger -4 years ago 153
CSS Question

Webkit scroll performance on iOS browsers

I've inherited a website project with the task of making it perform better on mobile (particularly iOS). The site is very slow on scroll and parts of the page take a long time to load. I've tried most of the scroll fixes like -webkit-overflow-scrolling: touch; and transform: translate3d(0,0,0); but have not had any luck. I've also tried to dig into the rendering tools in Chrome Dev Tools on desktop to see if anything stuck out. I'm at a loss.

Here's the link:

Answer Source

We can use the Chrome Web Profiler to determine what is eating up so much CPU. Note that this is probably taking much longer on mobile.

Chrome Web Profiler

It looks like in your case, skrollr.min.js is taking up the most CPU, so I'd try to get rid of that and stick to built-in scrolling methods. Is there any reason you need a special library for scrolling?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download