Sprites on Mobile Safari
I’ll admit that I haven’t done a lot of actual development for mobile browsers (mostly I’ve done user experience design, visual design, and usability). But this week I ran into a “fun” little loading error with Mobile Safari on the iPhone, iPad, and iPod Touch.
Apparently, Mobile Safari doesn’t like images (PNG, GIF, and JPG) larger than 3 megapixels (3 * 1024 *1024). This means any background image you want to show up on Mobile Safari needs to be height * width ≤ 3145728. This is only valid for iOS 3.0 (for below 4.0 is it okay to refer to it as iOS?) and above. Less then 3.0 can only handle 2 * 1024 * 1024.
So my 7900 x 1000 image needs to slimmed down a lot.
The reason I ran into this issue is that the client has many IE6 users and needs to fit their needs. His design is very nice, but has a lot of rounded corners and drop shadows. Rather than write two versions of the site, I’ve been making really large background areas in the sprite to avoid any potential issues with IE6.
I think I got a little heavy handed with this and didn’t create empty header and footer divs in the markup for just the bottom and top images, which I’ll be doing to solve the problem now. I am not terribly comfortable with this. The purist in me hates mark-up that has no real bearing on the content. Another solution would probably have been code a CSS3 version with rounded corners and had fallbacks for IE and non CSS3 compatible browser versions.
Thanks to the following articles for helping me fully understanding this issue more and come up with an appropriate solution: