CSS background sprite too large for iPhone

Question

I have a sprite sheet for my css backgrounds with a dimension of 2000x2000 pixels. Works fine in all desktop browsers except on Safari for iPhone where it simply doesn't render at all.

Lowering the size to 1000x1000 makes it render perfectly. (Well except for that fact that I now miss three quarters of the sprite sheet).

Are there any constraints when it comes to the dimension of background images? 2000x2000 isn't THAT huge. Trying to get around the work of redoing a lot of css-positioning.

Also, I'm using a media query for the layout (max-width, not max-device-width). But I still use the same graphics.

Edit: Ah yeah, it works on Android devices just fine.

Answer 1

We had the same issue on iPad and iPhone. The safest bet is to use 1024x1024 pixels or less. Eventually we had to divide the sprite sheet into 2 parts and did 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