Choppy scrolling on iOS with iscroll and PhoneGap

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. iscroll

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 [style*=‘foo’] selector. 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.