Question

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

Lowering the size to 1000×1000 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? 2000×2000 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 1024×1024 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