Poor performance on Mobile browsers (HTML5 Canvas - Solved)

[devranter]

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. 

[CTPEJIOK22]

thanks, man, you helped me a lot. i have a problems with old android devices, with this meta all works great, i have fps boost from 7 to 60 at simple scene.  and its strange, that Adobe animate dont have this option even now.

[stevep26518373]

I am so glad I found this thread...seriously!!!...why such thing isn't advertise much is a mystery to me.

Gracie, Merci,,,thanks a millions...you save my b*tt..

[redy-rccl]

Years down the line, and this thread proves to be super-helpful. Thanks so much from the future 👋

[rodrigod95218650]

I have seen your solution in 2024 and it worked. Thank you for sharing this valuable knowledge.

[erzoslav]

Unfortunately this solution did not help me. But I have found another solution and I think it could help others.

In JavaScript there is a function named resizeCanvas() and on the third line is set a pRatio. The point is, when this is larger than 1, canvas size is set larger than original. So when your casvas had size 1700x1300, it's set to 4500x3500. And Chrome on Android has a problem with painting and transforming that large object.

What is needed to do:

find the line 

var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;

And remove 

window.devicePixelRatio ||

Now it should work as desired.