CSS that can affect performance on iPad web apps or PhoneGap

There can be many performance challenges when developing for the iPad, you’ll immediately start running to the JavaScript to start tweaking it’s performance. But before you go there, consider the following things that are fairly standard when doing desktop CSS:

image replacement

What is it: In desktop CSS it’s pretty standard to text indent an element to something like -999999px, and include a background image.
What’s the symptom: One of the most obvious symptoms is flickering of elements as you animate them, this flickering may be on elements that share the same container as your text indented element
What’s the cure: many cures, you might text-indent to 100%, or include a span with in the element then hide it

animated gifs

What is it: We’ll often use animated gifs to show loading states, or small pieces of animation
What’s the symptom: If you run the iPad through Instruments on the Mac you’ll see CPU usage at a constant 40-50%
What’s the cure: use CSS3 animation


What is it: Using iFrames in overflow:scroll elements to show things like videos or maps
What’s the symptom: If you have an iframe that is outside of the viewport in an overflow: scroll element  (especially when using -webkit-overflow-scrolling: touch) then it will not render as you scroll to it
What’s the cure: no idea, please send me the answer 🙂

One CSS riddle that has me stumped


More info