> Weird webkit box-shadow bug
Today I finally received my new iPad and to my surprise some CSS intensive applications seemed to run smoother on an iPad 1 than on the new shiny Apple tablet.
Specifically I tested hexaga.me –my open source HTML5 puzzle game– on the third generation iPad and in some occasions the CSS animations resulted extremely laggy.
I’ve done a quick video to show you how bad the new iPad is compared to an iPad 1. It is not obvious at first sight, but look at the tiles as soon as I tap the blue button (when the tiles drop back into the original position).
On the new iPad (on the left) the tiles jump from the top to the bottom row with no animation at all, while on the old iPad you get a pretty smooth transition.
I reduced the elements on screen trying to isolate the culprit of this weird behavior and I narrowed it down to a couple of reasons.
First of all the new iPad seems more susceptible to DOM changes (in my case innerHTML and appendChild). But removing all the DOM changes didn’t help me reach the same smoothness of the iPad 2 (and not even of the iPad 1).
As soon as I removed
box-shadow from all the elements on screen the game got back its velvet smooth transitions. You should already know that opacity, box-shadow, overflow:hidden + border-radius and few others impact on the overall performance, but this seems especially true on the retina display.
So –now more than ever– avoid box-shadow.
But this is not the end of the story.
Have a look at this demo ( http://cubiq.org/dropbox/bs ) on your iPad. On the top left there are a dozen
box-shadow applied. At first you’ll see a choppy animation. As soon as you tap on the “Fix it!” button the tiles run smoother.
All that the fix does is to add a
top:0 to the divs. They are already set to
position:absolute but if you don’t give them a
top or a
bottom property they interfere with the main animation. The FPS count goes from 36 without the fix to 58 with the fix applied on my iPad 3.