4

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.

russinkungen
  • 367
  • 4
  • 12

1 Answers1

7

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

Gurpreet Singh
  • 20,907
  • 5
  • 44
  • 60
  • Saw someone else who had a similar issue but that was related to app development and the limitations of ios when keeping images in memory. Was hoping there would be some other way around this. Fortunately someone else will have to do the refactoring. :) – russinkungen Nov 22 '12 at 14:45
  • Your lucky then, it's very frustrating but we learnt a good lesson. – Gurpreet Singh Nov 22 '12 at 14:47
  • Odd thing here is that we've tested it on iphone 4, which should support 2048x2048. – russinkungen Nov 22 '12 at 15:12
  • I find that these are incorrect. I've been able to get images of up to 2048 on itouch 4g – Kir Mar 06 '13 at 13:48
  • well I think it's best doing it for 1024 anyway. It was simple to recalcuate the co-ordinates, once you think about it. If sprite image a is say 0, -1056px, then if you copy and paste from this sprite image to rest of PSD to a new sprite image, it's new bg position is 0,0. So any subsequent sprite images that occur after this one, just minus 1056 off the y position value. – Claire Mar 16 '14 at 11:06