CSS Fail Whale an Even Sadder Figure on the iPhone [Video]

Earlier today, Steve Dennis posted a remarkable picture of the Twitter “Fail Whale” rendered entirely in CSS, which appears fully animated if you view it in the WebKit-equipped Safari and Chrome browsers. Now, the iPhone uses Safari, and so it stands to reason that it should be able to handle the CSS animation, right? Well: Sorta.

In the video below, taken by our web dev Scott (and his battle-scarred, jailbroken iPhone) you’ll see how the iPhone ‘animates’ the CSS fail whale, but does so oddly and clunkily. Scott: “To my (lazy) eye, it looks like the phone tries to simplify the page down when it renders … the one rope and whale forehead make it pretty clear that it’s capable of drawing the curves, but it seems like it gives up on drawing so many of them.”

The weirdness of the animation has to be seen in its original habitat on the iPhone to be fully appreciated, if possible: This video was captured using an unsanctioned app (ScreenRecorder) on a jailbroken iPhone 3G, hence the slow framerate. In the original, the whale hovers about as slowly as it does in the video below, whereas the bird wings flutter at a fairly smooth rate (somewhere between 15-30 fps).

(Thanks, Scott. see original at Subcide.com.)