1 Reply Latest reply on Sep 20, 2018 6:52 AM by CTPEJIOK22

    Poor performance on Mobile browsers (HTML5 Canvas - Solved)

    devranter Level 1

      I was recently put in charge of helping build an interactive Christmas card for the company I work for. This is a pretty large company of animations, with many developers as well, so obviously this was seen to be a pretty easy project to start and complete.


      Anyways, as per usual I got started on creating the interactive portion of this project while one of our animators worked on creating the animation(s) for the card. It was a fairly long animation, around 40 seconds in length with all the interactive portions being done on a paused frame at the start of the timeline.


      Time comes, project is exported, debugging completed (or so I thought). Test had been done at the time using different browsers, and mobile emulation tested with Chromes responsive layout option in their devtools. Eventually we decide the project looks good, works well with good frame rates so we decide to deploy the card to our public website. I then go to test it on my phone. That is where the issue came up. Normally 60+fps on desktop, down to 0.9-5 fps on mobile. Pretty much unusable.


      To say the least I probably spent a good 32+ hours working on trying to figure out what was happening. Even going as far as getting a more senior developer to help figure this out and rework the project for mobile optimization. Turns out, (maybe this should have been more obvious) GPU Rasterization is disabled by default on mobile devices for what ever reason. Absolutely nothing at all pointed to this being the case when debugging. Ran performance tests, heap snapshots (etc), randomly stumbled across the fix when noticing that the FPS meter on mobile showed GPU Raster being turned off.


      The fix/solution was embarrassingly easy and something I hope gets added to later versions of Animate. In your HTML document add this meta tag


      <meta name="viewport" content="width=device-width, minimum-scale=1.0">


      This one line will enabled GPU Raster for mobile. Honestly something which should be enabled by default, or at least included in the meta tags of the generated HTML file for an exported Canvas project. One last thing to point out, there was no performance issues on iOS devices when we first exported the project. I would assume that is because GPU Raster is enabled automatically on their browsers. If your testing a Canvas project strictly with an iOS device I would suggest testing on other platforms as well just to make sure you're not getting these same performance issues.