pagePiling.js
pagePiling.js copied to clipboard
alvarotrigo
It's extremely slow on android devices?
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
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.
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.
It still being false in your example: http://utkuokutan.com/test/assets/js/core.js
You are the one who has to check it now in Android. I have no android to test it.
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!
You have to test it in the real device. Emulators are not exactly the same always.
It should work well with css3.
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.
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!
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.
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.
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).
@curvedb It is running smooth on Sony Xperia P however I can't navigate by touch gestures
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...
on android bug I think fullpage.js still needs to be optimised for android too. Just a suggestion...
I guess you meant pagePiling.js
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?
Hi, May I know if the enhancement is finished? I've encountered the same issue on Android tablet. It's slow. Thanks.
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.
@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.