Saola animation not working solely on iOS, why?

Hello, I created a Saola animation that works fine on my Windows and on Android. I don’t have an iOS device, but a friend of mine tells me the animation is not working on his iPhone. I wonder why this can be?

There is some user code in a Java-Script called “sceneEventHandlerMouseMove.js”, but I don’t see any reason why this could raise an error solely on iOS.

I’d be very happy to find a solution here.

This is the page online, and here is the project as a Saola 2.7.0 package.

Thanks a lot for your efforts!

Martin…

Hi Martin,

There are some issues with your project::

  • It contains too many large images in one scene which make animation jerky on iOS devices.
    Please try to reduce the image dimension, and file size before importing into Saola Animate.
    You can also use multiple timelines instead of symbols.
    Changing animating properties (e.g. Opacity 100/0 instead of Display on/off) may help in some cases.
  • Chrome and Safari on iOS devices use touchmove event, but your code doesn’t handle it well so it doesn’t run on iOS.
    In PlayZFAnim function, ev.type is undefined for touchmove event after this statement
    if (ev.targetTouches)
      ev = ev.targetTouches[0];
    
    You should declare an eventType variable, initialize it before assigning the first target touch for the event, and checking it value to get touch position after that:
    // your code
    if (ev.type == "pointermove")
      posMouseLeft = ev.clientX - offsetLeftAll;
    // should change to
    if(eventType == "pointermove" || eventType == "touchmove")
      posMouseLeft = ev.clientX - offsetLeftAll;
    
  • getScaleXY function doesn’t work for Firefox, Edge because strScale use scale(s) syntax on these browsers, not scale(x, y)
    You can change it as below so that it works on these browsers:
    var scaleX = parseFloat(arScales[0].split('(')[1]);
    var scaleY = scaleX;
    if (arScales.length > 1)
      scaleY = parseFloat(arScales[1].split(')')[0]);
    

Regards

Hello Toan Le,

thank you so much for your reply. I know this goes far beyond support questions, so I appreciate your help even more!

I changed the code according to your suggestions and I will get an iPhone for testing tonight, at least. Unfortunately the only way for a Windows-guy like me to debug a webpage on iPhone is abandoned: JSConsole.com. So I suppose I would have to get a whole Mac-system just to debug a iPhone.

You say too many large images make the animation jerky. I wonder if you know that or if its a guess? Im am asking because I have some even larger animations done with Saola, and they run fine. E.g. this one. Also there is no problem running the animation even on cheapest android devices. So I can’t imagine its a lack of power or memory on iOS?

I hope I will get the animation running, thank you so much! Really.

Best regards! Martin.

Hi,

You can view console log on Chrome browser on an iOS device by opening chrome://inspect tab.
For remote debugging Safari on Windows, there are several tools such as this one GitHub - RemoteDebug/remotedebug-ios-webkit-adapter: Debug Safari and WebViews on iOS from tools like VS Code and Chrome DevTools

It depends on specific content and types of animations on each project. But in my experience, there are many issues on iOS than on Android (even on cheapest Android devices).

Regards

Hello Toan Le,

now that I got an iPhone and an iPad for checking how my animations perform on them, it is really sobering. None of them works as expected. I have an Android device for maybe 180$ here, and everything is absolutely fine, there is a lot of headroom to have even more things running, I suppose.

Now the iPad I have here is one of the newest, and the animations with 12 images don’t do well. This is really annoying, especially since it was Apple who killed Flash because they stated, it doesn’t perform good enough on iOS. Developpers should use HTML5. Now iOS does not provide that…

However I will have access to a huge Mac, then install the webkit-adapter and see if I can find out what`s the problem. That’s a good bunch of work for me, I am on Windows and never worked with a Mac…

However, thank you very much…

Hi Martin,

Please let me know if you find out something helpful.
Thank you!