NatGeo_Bird_300x250_ANALYSIS.zip (2.6 MB) I built a animated banner in hype that works great on desktop. On android tablets and phone the animation is jerky at best and literally crashes iPhone, forces phone to restart. iPhone tester was using both Safari and Chrome, banner never loaded and phone crashed.
Banner contains 4 images sprites that vary in size from 3900x250 to 1500x250 pixels and 3 svg files. The images sprites are video frames that are animated to turn on on off. These frames are repeated in the timeline.
My in tech team is not sure what is causing the problem, but think it may be java related.
For the publisher I need to make everything inline so I have attached that file also.
Any idea what is causing the banner to crash an iPhone?
The image BirdShuffleSprite.jpg is 3900 x 250, which might be pushing the image memory to the limit on the iPhone. Can you split that into two?
Another thing that might help is if you uncheck ‘Use Webkit Graphics Acceleration’ and re-export. Can you let me know what iOS you’re running on the iPhone and what model it is?
That's what stood out to me too. That is an absolutely enormous image, easily twice the width of the viewport on a 1080p display, of which there are zero examples in the handheld world.
Even loading it in situ and having it scroll across the viewport will be a big commitment in storage; in essence, to make the image shuffle around, it has to be loaded completely first, then shifted, which requires a VRAM commitment of 3900 x 250 pixels - 975,000 KB RAM - times the 24-bit information save for the colors on the pixels, which Photoshop tells me requires nearly 3 MB to display. That's just the BirdShuffleSprite.
Portable devices are not dedicated gaming systems with a massive GPU that do things like that without breaking a sweat; and they are coded to force apps to terminate when they begin to invade active system space. If a user has several high priority apps running in the background (and most do, without realizing it), such as mail, calendars, and schedulers, well, the system might well have to kill something, and it's likely to shoot down the lower priority targets first.
== Meta discussion ==
Try to be conservative in what you expect your users' machines to be able to handle; never assume anyone on the home-user level is running with a 27" screen, 8 GB VRAM, a paired quad-core processor, and 32 GB RAM; and at the very least, remember that many handheld users are charged for bandwidth. Don't push more data than is strictly and absolutely necessary. A 3200px-wide image is probably not necessary. Your BirdShuffleSprite, RumpShaker, and Snuggle images would make a lot more sense as an animated GIF than a wide stripe that runs back and forth on the screen.
Thanks for the quick response. I pared down the animation and assets and it runs great on iphone and windows devices, but still struggles a bit on android devices.