search

alvarotrigo / pagePiling.js

pagePiling plugin by Alvaro Trigo. Create a scrolling pile of sections. http://alvarotrigo.com/pagePiling/
4.1k stars 654 forks source link

It's extremely slow on android devices? #29

Open curvedb opened 9 years ago

curvedb commented 9 years ago

I am trying to build up a responsive website using bootstrap and pagepiling.js. Site is works perfectly on iOS devices, desktop safari and desktop chrome browser. However it's extremely slow on android devices and I couldn't figure out what is the problem.

Here is my test page. http://bit.ly/15nPtps

alvarotrigo commented 9 years ago

Why are you using css3:false. Animations are much smother using css3. And the jQuery fallback will be provided when css3 animations are not supported, as detailed in the docs:

css3: (default true). Defines wheter to use JavaScript or CSS3 transforms to scroll within sections. Useful to speed up the movement in tablet and mobile devices with browsers supporting CSS3. If this option is set to true and the browser doesn't support CSS3, a jQuery fallback will be used instead.

curvedb commented 9 years ago

I enabled css3 but still having slow performance issue. do you think it's related with css animations ? I added -webkit-transform: translateZ(0); for each css transition on the page actually.

alvarotrigo commented 9 years ago

It still being false in your example: http://utkuokutan.com/test/assets/js/core.js

curvedb commented 9 years ago

sorry. updated it now. could you please check it out now?

alvarotrigo commented 9 years ago

You are the one who has to check it now in Android. I have no android to test it.

curvedb commented 9 years ago

haha sorry :) I am actually an apple user but have a stupid android device too! lol. I also checked it out on android virtual device (android emulator)

sorry for being pain but if you can help me I am willing to send you a reasonable donation. I can use elance too but I prefer to help you since I am using your magnificent plugin!

alvarotrigo commented 9 years ago

You have to test it in the real device. Emulators are not exactly the same always.

It should work well with css3.

curvedb commented 9 years ago

yes I tested it on a real device. I have an android device

alvarotrigo commented 9 years ago

No idea what can be the reason. You can try to resize the images to adapt them to a mobile device but... they are not that big, it shouldn't be a problem.

curvedb commented 9 years ago

Thank you so much for your help!

Last 2 questions. Sorry for wasting your time!

Can you fix the problem for some donation you will decide? or do you think there is a javascript conflict?

thank you so much!

alvarotrigo commented 9 years ago

I don't have any proper way of testing it as I don't own any android device and I have no access to them.

Have you tried fullPage.js, do you have the same problem there? That'd be nice to know.

curvedb commented 9 years ago

I know fullpage.js but I think there is no support for vertical scrolling?

alvarotrigo commented 9 years ago

You are not scrolling vertically in your example either. You are not using $.fn.pagepiling.setAllowScrolling(false);.

In any case, I was asking to compare both plugins performance and see if the problem is in this plugin or in android devices managing css3 transformations.

Try this link from your android device and let me know if it works fluid.

curvedb commented 9 years ago

$.fn.pagepiling.setAllowScrolling(false); isn't for mouse scrolling?

alvarotrigo commented 9 years ago

setAllowScrolling(boolean) Adds or remove the possiblity of scrolling through sections by using the mouse wheel/trackpad or touch gestures (which is active by default).

cymruu commented 9 years ago

@curvedb It is running smooth on Sony Xperia P however I can't navigate by touch gestures

curvedb commented 9 years ago

I have tested the plugin on 3 different android device but result was same. it was extremely sow. Changed the code with fullpage.js and now it works faster on android bug I think fullpage.js still needs to be optimised for android too. Just a suggestion...

alvarotrigo commented 9 years ago

on android bug I think fullpage.js still needs to be optimised for android too. Just a suggestion...

I guess you meant pagePiling.js

domialex commented 9 years ago

There is no optimisation to be done here, it's a simple translation in css3 or javascript. If it lags, there is maybe too much rendering going on, it also depends on what browser your are using on your android device. Chrome, Firefox, default noname browser?

zy532410321 commented 9 years ago

Hi, May I know if the enhancement is finished? I've encountered the same issue on Android tablet. It's slow. Thanks.

alvarotrigo commented 9 years ago

May I know if the enhancement is finished?

Nop.

robertpateii commented 8 years ago

The example sites for both pagePiling and fullPage work well for me on my nexus 5x. My coworkers have also reported acceptable performance on their miscellaneous Android devices.

The example link in the original post is now dead. This can probably be closed now unless new examples of the problem are posted.

alvarotrigo commented 8 years ago

@robertpateii I believe this might be an issue of having plenty of sections or sections with plenty of DOM elements in it.

pagePiling.js will move all sections except one when moving from the 1st to the last. And it will do it with a translate3d property for each of them. I remember trying to improve this task, but never found a good way to deal with it.