Dropped frames on mobile with background canvas


I’m trying to sync my THREE.js scene rendered on background canvas with html scroll. And everything looks ok on desktop, but on mobile I see lots of dropped frames(see screenshot). There does not seem to be much of CPU activity.

My guess was that browser trying to optimize battery consumption on this way, but setting powerPreference: 'high-performance' doesn’t improve anything.

I created minimal project to reproduce this problem.

Is there a way to fix this issue? Or maybe somebody know better approach to achieve same result?