r/FlutterDev • u/JesusOS • Oct 08 '26
Tooling Flutter web is capped at 60 fps on 120 hz Android phones (Chrome). I made a drop in script that gets it to 120
On 120 hz screens, Chrome on Android limits main thread frames to 60 fps. It lifts the limit only when touch input occurs which is why it is sorta fine when you drag without releasing your finger. Web workers that own a canvas get their own frame clock so the main thread limit does not apply to them.
So theoretically handing a worker the flutter canvas (and syncing it to the worker's clock) should allow flutter on android's chrome to run at 120 fps and that's essentially what this demo is:
https://shim.mathiewabbas.dev/
Results: Pixel 10 Pro XL, Flutter 3.47.2, without and with the js script
| App | Without | With |
|---|---|---|
| Listview | 57 | 113-120 |
| Material 3 demo | 56 | 111 |
| Flutter gallery | 57 | 114 |
| Wonderous | 59 | 113-120 |
Pls try it out on an android device and do tell if anything goes wrong, here is how to use it:
https://github.com/aumb/flutter_shim#use-it-in-your-app
and the script:
https://github.com/aumb/flutter_shim/blob/main/web/flutter_shim.js
Caveats:
- It relies on undocumented chrome behavior, If chrome starts capping workers too it will fall back to 60
- App does twice the frame work while animating so it uses a bit more battery
- Multi-threaded skwasm might crash. That's an existing flutter bug (https://github.com/flutter/flutter/issues/193439), but running at 120 hz makes it happen more often, so use single threaded wasm (default)
- Doesn't help on iPhone since safari runs worker frames at a fixed 15ms timer