Dropped frames on mobile with background canvas

Questions
, , ,
1

Hi!

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.

image
image1794×658 31 KB

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.
https://codepen.io/origion/pen/PoJbXvb

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

Thanks!