[SOLVED] Navigation stutters with webGL context active on mobile

Issue

I’m developing a site with hero banners made with three.js. The scenes are VERY simple, and the render run at 60fps even on low end devices.
But on mobile I’m experiencing an issue. When a page is scrolled down quite a lot and then scrolled up again, the browser freezes for 1-2 sec (on my device, Android with Chrome Mobile).

I think that is due to Chrome "saving resources" while the canvas is not visible on the viewport. How can I prevent this from happening?

Solution

I fixed my own problem by stopping the rendering while the canvas is out of the viewport with a cancelAnimationFrame.
More info in this question: three.js how to stop render when the user can't see the 3d space?

Answered By – sintj

Answer Checked By – David Marino (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *