I ran into a situation this weekend where certain pages of a PhoneGap application were incredibly choppy on iOS versions pre 4.3.x.
Apparently, there is a problem with older browsers using CSS3 selectors like
div[style*=‘foo’] in combination with other DOM elements.
The test case was a little tricky to create, seeing that pinpointing this problem required mucho testing.
However, I minimized the markup and CSS to only a few classes and DOM elements. The choppy scrolling is caused by a combination of inline
styles, an ordered list, a table with a lot of rows, and the use of the specific CSS3
You must run the test on an older iPhone to see the choppiness of the scroll. This happens on both Mobile Safari and within PhoneGap’s webview.