Three.js scene overflow error on mobile

Chriz96 · October 3, 2022, 6:43pm

I’m developing a scene with an animated camera using GSAP. It works great on desktop but on mobile when you scroll down it scrolls the canvas a little, showing the white space beneath and then snaps back in place. I tried fixing it using overflow:hidden, overflow-y:hidden, and overscroll-behavior-y: contain but none seem to work. Any ideas on how to fix this issue?

Heres my repo: GitHub - tv4Interactivo/interior_plants and github page: Plantas para interior para tu casa

trueshko · October 4, 2022, 4:41am

You can add to you page an invisible element with position: fixed and bottom:0. And every animation frame check its bottom position usin getBoundingClientRect() - this will be equal to the visible height

Topic		Replies	Views
in three js, scroll event is working good in desktop as it is a 3D model but when it comes to mobile the touch scroll in not working on my mobile, any help would be appreciated Questions	0	291	July 4, 2023
Scroll Animation with multiple canvases Questions animation , canvas , scrolling , gsap	9	2379	May 9, 2022
Dropped frames on mobile with background canvas Questions performance , mobile , webglrenderer , optimization	0	527	December 13, 2021
Performance issue with threejs on scrolling Questions performance , scrolling	7	3539	March 11, 2022
How to scroll the canvas on touch device? Questions geometry , animation	2	4163	March 26, 2021

Three.js scene overflow error on mobile

Related Topics