CSS sprite too big for iPhone

Question

I have a sprite sheet for my css backgrounds of 2000x2000 pixels in size. Works great on all desktop browsers except Safari for iPhone, where it just doesn't appear at all.

Reducing the size to 1000x1000 makes it ideal. (Well, except for the fact that I missed three quarters of the sprite sheet).

Are there any restrictions regarding the size of background images? 2000x2000 is not so huge. Trying to get around the job of reprogramming a lot of CSS positioning.

In addition, I use a media query for the layout (max-width, not max-device-width). But I still use the same graphics.

Edit: Oh yes, it works great on Android devices.

Answer 1

We had the same problem on the iPad and iPhone. The safest bet is to use 1024x1024 pixels or less. In the end, we had to split the sprite sheet into 2 parts and make CSS again.

According to http://www.glbenchmark.com/ and http://developer.apple.com/library/ios/#documentation/3DDrawing/Conceptual/OpenGLES_ProgrammingGuide/OpenGLESPlatforms/OpenGLESPlatforms.html

Device Maximum texture size iPod Touch 1024 x 1024 iPod Touch (Second Generation) 1024 x 1024 iPod Touch (Third Generation) 2048 x 2048 iPod Touch (Fourth Generation) 2048 x 2048 iPhone 1024 x 1024 iPhone 3G 1024 x 1024 iPhone 3GS 2048 x 2048 iPhone 4 2048 x 2048 Samsung GT-i9100 Galaxy S2 4096 x 4096 Google Nexus S 2048 x 2048 HTC EVO 4G+ 4096 x 4096 HTC Vision (Desire Z) 4096 x 4096 LG P990 Optimus 2X 2048 x 2048 HTC G1 1024 x 1024 Barnes & Noble Nook color 2048 x 2048 

Source: http://hellomobiledevworld.blogspot.co.uk/2011/09/sprite-sheets-and-maximum-texture-size.html