iOS html5 performance issues #2: scrollpanes and hardware acceleration

Don’t try to force hardware acceleration on elements that are placed on a touch-scroll-pane! …and here’s why:

I personally love the  ‘-webkit-overflow-scrolling: touch’-feature as it allows you to implement a scroll pane for mobile devices with just writing two lines of css and no need of hasseling around with JS to make some content scroll smooth ect., however this approach also comes with a drawback: hardware acceleration will cause performance-issues on iOS (maybe other mobile devices, though it was only tested on an iPad2 running iOS6)

In my last post I was writing about forcing html5 hardware acceleration on iOS6, turns out you do NOT want to do that on every element as this can also cause the performance to drop, pointed out by the following example:
Continue reading

iOS6 html hardware acceleration changes and how to fix them

As probably many developers have already experience this over the past weeks:
I had a phonegap application for iOS that contained some visually animated components  (a coverflow or a carousel for example). But after updating to iOS6 this is all flickring now and it feels horrible because it’s just stumbling and faltering on the new version of the OS.
There are several reasons for this and I cannot say which were already there in iOS5, however here are the two main reasons and instructions on how to fix that: Continue reading