Skip to main content
George Bernard
Inspiring
February 25, 2021
Question

HTML5 Canvas animation run slow on Chrome Mobile

  • February 25, 2021
  • 3 replies
  • 3994 views

Hi everyone, on Chrome mobile browser, my animation suddenly drop its fps (normal it's 30fps, but on Chrome mobile, I think it's 1-2 fps, very lagging). The thing is it's only happened to some project, and it's working fine on Chrome windows and other browsers.

 

I have add this meta to header but it's still run slow:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover" />

 

I also run these scripts but not helpful:
https://helpx.adobe.com/animate/using/tip--html5-optimization.html

 

I also change all my tweens to classic tween (before that they are motion tweens) and remove every frames that aren't need. Not helpful.

 

My last resort would be change it to Bitmap instead of using Illustrator import. But that'll take a lot of efforts because these projects have many images.

 

Please, anyone, help me.

Link to my animation: https://angry-jones-e2ad12.netlify.app/

    This topic has been closed for replies.

    3 replies

    natashah93244772
    Known Participant
    February 29, 2024

    If I tilt my android device to landscape and then tilt it back to portrait, the animation runs smooth like desktop, everytime.
    Is there a way to force this to happen behind the scene, quickly, where the user doesn't even see these flips?
    link to canvas/app in production: https://lux55.com/HomeCheckPro/1/

    kglad
    Community Expert
    March 1, 2024

    you should be able to use the same listeners and just dispatch the needed events with code.

    Known Participant
    May 30, 2021

     

    your animation works smoothly on mobile Chrome for iOS (iphone 12 mini).

    your issues are on Android I assume?
    can u give info about what device / Android version etc...?

    George Bernard
    Inspiring
    June 16, 2021

    Yes, it's lagging on Android Chrome. My device tests are various from Android 9, 10 such as Realme 5 Pro, Redmi Note 9, Samsung Galaxy A6, etc... The lower Android ver, the worse.

    On iOS Chrome, it's less laggy, but low spec devices are not really smooth. It's just acceptable.

    New Participant
    October 22, 2022

    Have you solved this problem?

    New Participant
    May 14, 2021

    I have the same problem with my animations no matter how simple they are.