How to improve the scroll performance of webapp in webview of retina device

Question

I have a iPad3(ios5):
I load my webapp html locally,I disable all the css3 effect like box-shadow and everything I can optimize like what I used to optimized a website, etc.
And All my effort focus on css/html(I don't even execute any javascript),yet I still couldn't get to a tolerable fps

did I miss something?Is it just a performance issue like a bug or something else in ios5?
What's the best practice to improve the scroll performance in webapp?

Answer 1

I have been struggling with most likely the same problem ( see my SO question here )

I do use iScroll and recently I had another performance issue in iOS6.1.3 but with the iScroll itself. I was able to solve it by explicitly add css to get hardware acceleration on the iScroll.

I used a specific page id to assign the css but you can decide yourself where you need to add it if it would help for your case as well.

CSS:

#myid * {
    -webkit-transform: translate3d(0, 0, 0);
}

my iscroll uses the classes s-scrollwrapper and s-scrollpane which might be better choices to add the css to enforce hardware acceleration. Then the css would be

.s-scrollwrapper * {
    -webkit-transform: translate3d(0, 0, 0);
}

or

.s-scrollpane * {
    -webkit-transform: translate3d(0, 0, 0);
}

Hope this helps you improving the speed on iOS5 as well.

Webapp on iPad 3 retina display slow screen painting