Canvas disappears on IOS Safari

[2Senn]

I am rendering a sphere with some texture to fill the landing page. When scrolling on ios safari the page becomes black (which is the body bgcolor) scrolling a few more times brings it back. I am thinking it is because of the resize that is happening in safari with the search bar. Anyone know how to fix this?

on Next.js 14 (App dir)
I have GlobalCanvas and smoothscrollbar in my layout.

This is how I call my sphere:

    <div className="relative w-full h-screen overflow-hidden">
      <>
        <div
          ref={el}
          className={`flex w-screen h-screen overflow-hidden aspect-[16/9] z-0 `}
        >
          <div className="absolute size-full flex flex-col z-20">
            <Banner />
          </div>
        </div>
        <UseCanvas>
              <ViewportScrollScene track={el} hideOffscreen={false}>
      {(props) => (
        <Icosahedron args={[1.5, 20]} {...props}>
          <PerspectiveCamera
            makeDefault
            fov={50}
            near={0.1}
            far={2000}
            position={[0, 0, 1]}
          />
          <BackgroundSphere />
          <Effects sRGBCorrection={false}>
            <FXAAPass />
            <ConstantNoisePass />
          </Effects>
        </Icosahedron>
      )}
    </ViewportScrollScene>

        </UseCanvas>
      </>
    </div>

Edit: Added a codesandbox:
https://codesandbox.io/p/sandbox/hello-scrollscene-forked-tqdvwr

if you try resizing with devtools the thing flickers :/ I am relatively new to the three.js ecosystem and so I am just trying to recreate alot of things to learn. Please help point my mistakes out to me

Edit2: seems like the flickering was fixed on web (resizing with devtools doesnt make it flicker anymore) when I removed the perspective camera component and just used the orthographic={false} prop. However, issue persists on IOS when scrolling.

[ffdead]

Hi @2Senn - are you still having issues?
I tried your codesandbox above and could not see any problems with it - seems to run smooth both on desktop and iOS.

[2Senn]

Hey @ffdead nah I fixed it. Basically the problem was with the perspective camera which I added in an incorrect way. as for on IOS I used the syncTouch prop from Lenis and the issue was resolved.

But I did want to ask if there is a way to use the Loader component from drei with the scroll rig setup. It does not seem to work for me atm. Or atleast the useProgress hook

Thanks!

[ffdead]

Great! Yes, to keep the scroll scenes active on mobile, using syncTouch is the best option in my experience 👍

<Loader/> and useProgress() should work too

[2Senn]

Where do I place the Loader component? I believe it should be outside the canvas right? so with next.js 14 (app dir) it would be in my providers file under the globalcanvas component ? or somewhere else?