> You shall not flicker!
Off screen items on iScroll are not cached by the mobile browser, when it comes their turn to appear on screen they need a few moments before being accessible, creating a nasty flickering. Well, there’s an easy trick to force the browser to cache all elements and it’s so simple I regret not having tried it before.
This flickering is a well know “feature” to all iScroll users. Have a look at this example (only on real device! no simulator). I added some background images and text shadows to emphasize the flickering. The effect is less noticeable on iPad and newer devices, but still it makes the application feel less “native”.
Now have a look at the flicker free example. The only difference between the two is that in the flicker free version I’m applying
-webkit-transform:translate3d(0,0,0) CSS style to all elements inside the scrolling area.
Why isn’t this going to be included in the main iScroll script? The answer is: memory allocation.
We do not have control over memory in mobile webkit. If we use too many resources the browser just crashes, and of course if you have thousands elements inside the scrolling area, forcing the browser to cache everything, would just make your application crash.
So that’s why you should optimize your application and use the
-webkit-transform trick sparingly.
Also try to keep your HTML structure as simple as possible. Remember that the following:
<ul> <li><a href="somewhere">Some text</a></li> </ul>
Can be always replaced by:
<ul> <li onclick="window.location.href='somewhere'">Some text</li> </ul>
We just lightened the HTML structure by 50%. If you have 100 rows, you’d have 100 tags instead of 200. (And of course I’d use even listeners instead on inline