Stuttering on mobile

[2Senn]

First of all, thanks alot for this great package!

Whenever I go on my website from mobile and scroll the gradient sorr of like stutters and sometimes moves completely down to the other sections. Any clue why that happens? I can show some source code if needed.

I Also wanted to know how I can make the gradient responsive on mobile.

Thanks

[ruucm]

Yes a reproducible codes are needed. I appreciate if you can share it as codesandbox.

[2Senn]

It is very little code so I do not think a sandbox is needed. I just have the following:

<section className="relative min-h-screen w-full bg-black items-center justify-center">
      <View className="absolute size-full">
        <Suspense fallback={null}>
          <ShaderGradient
            cameraZoom={12.2}
            wireframe={false}
            uTime={0}
            uFrequency={5.5}
            uAmplitude={3.1}
            cDistance={0.5}
            positionX={0}
            positionY={0}
            positionZ={0}
            rotationX={0}
            rotationY={130}
            rotationZ={70}
            grain="on"
            uSpeed={0.3}
            range="enabled"
            rangeStart={0}
            rangeEnd={40}
            color1="#73bfc4"
            color2="#ff810a"
            color3="#8da0ce"
            envPreset="city"
            lightType="env"
            type="sphere"
            reflection={0}
            uStrength={0.3}
            uDensity={0.8}
            cAzimuthAngle={270}
            brightness={0.8}
            cPolarAngle={180}
          />
        </Suspense>
      </View>
      <div className="relative  min-h-screen flex flex-col justify-between z-20">
        <div className="container mx-auto grow flex items-start justify-start mt-32">
          <p className="text-start  md:text-[12rem] leading-tight text-white max-w-[60vw] font-semiBold">
            Lorem ipsum
          </p>
        </div>
        <div className="absolute bottom-0 left-0 m-4">
          <p>Your bottom left text goes here</p>
        </div>
      </div>
    </section>

then below it I render another section that is of screen height. The sphere consistently leaks into the other section and on mobile it completely shifts to it. The complete shift usually happens when resizing. Either using devtools or on IOS when the search bar in safari minimizes. Obviously with devtools it does not matter but the ios issue is a big problem.