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

This article is over 14 years old and may contain outdated information

Recommended Videos

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


The Mary Sue is supported by our audience. When you purchase through links on our site, we may earn a small affiliate commission. Learn more about our Affiliate Policy
Author