Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to prevent scroll lag on Safari Mobile (iPad)?

I have a simple html5 page with 3 divs inside. If I only allow the 3rd div to scroll i get some aweful lags and touch responsivness is weird. Any ideas?

<html>
<body style="overflow:hidden">
 <div>
    BLA1
 </div>
 <div>
   BLA2
 </div>
 <div style="overflow: auto;">
    BLA3 overflow is here
 </div>
</body>
</html>
like image 246
TecHunter Avatar asked Mar 06 '12 10:03

TecHunter


2 Answers

Ok, thanks to the iScroll4 plugin I got a new trick for iPad Web Developpers. Apparently it works way better with this CSS :

overflow-y: scroll;
overflow-x: hidden; 
-webkit-overflow-scrolling: touch;

While this lag like hell :

overflow: auto;
like image 162
TecHunter Avatar answered Oct 30 '22 06:10

TecHunter


Use iscroll 4 http://cubiq.org/dropbox/iscroll4/examples/simple/ this will give best solution

like image 32
karthik Avatar answered Oct 30 '22 04:10

karthik