Does anyone know if the iPad has any limitations on the canvas tag?
Currently I’m working on a creative that uses a flipbook and audio tag combination to simulate inline video content. The animations are drawn to the canvas element and synced with the audio content being played. There are 4 short video clips that get played when someone clicks on the four buttons below.
http://cs.sandbox.millennialmedia.com/~tkirchner/rich/K/kungfupanda2_test/
The problem I’m having though is in iPad. After playing a few animations, mobile safari just suddenly crashes. It never happens when I play it on my iPhone but it happens every time on the iPad. Its not one particular animation either because if I click a different combination of buttons, the previous clip that it crashed on plays fine, and then it decides to crash on another clip.
I think the problem might have to do with the amount of memory Safari gives individual page views. I found a blog post that explains that problem pretty well.
http://roblaplaca.com/blog/2010/05/05/ipad-safari-image-limit-workaround/
According to that post, once mobile Safari reaches a particular threshold of memory, images begin to return blank. This is consistant with my finds so far. The iPad that I’m testing this all on is running iOS 3.2.1 (and before anyone tells me that I should just explain to my boss that nobody uses 3.X anymore, I tried… they still want me to investigate this). I borrowed a co-workers iPad running iOS 4.2.1 and that device didn’t crash, but some of the images weren’t being drawn to the canvas.
I’m pretty sure its a problem with the canvas tag too, because I tried experimenting with running the animation without drawing anything to the canvas element, and the page never crashed.
Thats why I think maybe its a limitation with Safari’s support of the canvas tag. Of course, I’m open to anybody else’s suggestions.
Feels kinda weird answering my own question again, buuuut I figured if anyone did a search on this kind of question, an answer would be helpful.
I believe my original hypothesis was correct. The total amount of images that the aniamtions were using was around 600+. I think the older iPad loaded as many as it could and then when it ran out of cache and the canvas tag was trying to draw images that weren’t really there anymore, it crashed.
Eventually we ended up serving the ad to devices with iOS 4.2 and higher, since the problem didn’t seem to occur on those newer devices. Plus, we compressed the image sizes further, so that helped reduce the amount of images we were storing into memory.
If anybody knows approximately what the cache threshold in iOS 4.2 or higher browsers are, I’d appreciate it if you commented. Just want to get an idea of how many KB of image data I can safely load.