Scrolling causes whole page to repaint

[frjoha]

We're experiencing performance issues when you are scrolling the main content area. This is most apparent on some android devices like HTC One X, Samsung Galaxy Tab 2 and some other ones we've tested.

The problem is that the main container is positioned absolutely and have overflow:auto so that element handles the scrolling of the content/page. That causes a repaint of whole page when scrolling. If we turn this off the problem disappears but the menu handling also stops working properly.

Is this something that you've given som thought and solved in some one with a fix or workaround? As it is now we can't use snap.js due to performance issues

[jakiestfu]

@frjoha Incredible find. The next version of Snap.js will be focused solely on performance, and this is a great find. There are also additional things throughout the issues list that point to performance issues, so I will create a new issue soon and reference all of the main performance issues. Thanks!

[robhadfield]

Is the reason that you lose the smooth scroll in iOS? When scrolling you can't 'flick' the page up as you normally can, it stops as soon as you lift off.

I'll open a new issue if you don't think it's related.

Thanks

[frjoha]

@Rob-Che Could be, repainting is a pretty heavy process. I mostly noticed the problem on slower android devices but it's a heavy process for all devices and platforms. Some can handle it, some can't

[robhadfield]

It's the inertia scroll that seems to stick rather than roll after you release your finger.

The site I'm developing is thankfully not that long so it isn't a major issue. It's such a great script though, thanks @jakiestfu - I hope I can contribute in the future.

[robhadfield]

Here's a link to my dev site if you want to give it a go : http://jb.robhadfield.co.uk/blog/

[mvhecke]

Is there a solution already for this problem @jakiestfu?

[robhadfield]

Aiming for a resolve on the V2 Roadmap @Gamemaniak

[mvhecke]

I guess the problem is that translate3d is used for the entire page, what do you think that might cause this @Rob-Che?

[jonleverrier]

@Rob-Che Just checking - have you added https://github.com/jakiestfu/Snap.js#independent-scrolling to your CSS and applied the class "scrollable" to your content DIV?

I was experiencing the same problem as you, but this fixed the problem.

[robhadfield]

hm, I'll check that @jonleverrier - not been working on it for a while. I'll report back.

[jonleverrier]

@Rob-Che After adding the CSS to your stylesheet, the example markup would look something like this:

<div id="content" class="snap-content scrollable">

[mvhecke]

I forgot adding the class scrollable and although scrolling seems to go a bit smoother, it doesn't solve the entire page repaint problem.

[ashishsajwan]

watch this https://www.youtube.com/watch?v=z0_jD8nO5Zw

[mvhecke]

@ashishsajwan Thanks for the tip, but I already created something that better suits my needs.

[ashishsajwan]

can you plz share your solution... @Gamemaniak

[mvhecke]

@ashishsajwan It's AngularJS based, so I'm not sure if you can do something with it.

[ashishsajwan]

@Gamemaniak are you saying that you have moved on to something (based on AngularJS) which gives you similar functionality as snapjs

and you are not using snapjs any more..

[mvhecke]

@ashishsajwan Yes, you are right.