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-shadowand 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?

Custos

Do you have an URL for the site where it could be tested? It's hard to make guesses. – Kennethkennett

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

Diorio