移动端Chrome出现THREE.WebGLRenderer: Context Lost问题求助

我参照YouTube教程制作了个人网站，技术栈为Vite+React，通过Firebase部署。桌面端Chrome运行正常，但在三星S23+的Chrome浏览器中，部分3D模型无法渲染，报错信息如下：

• WARNING: Too many active WebGL contexts. The oldest context will be lost.
• THREE.WebGLRenderer: Context Lost.

受影响的包括部分BallCanvas元素以及Computer.jsx中的Computer组件。我尝试过修改Ball.jsx中的scale参数，也查阅过相关解决方案，但未找到适配JSX场景的有效办法，恳请帮助。

修改后的Ball.jsx代码如下：

import React, { Suspense } from 'react'
import { Canvas } from '@react-three/fiber'
import { Decal, Float, OrbitControls, Preload, useTexture } from '@react-three/drei'
import CanvasLoader from '../Loader'

const Ball = (props) => {
  const [decal] = useTexture([props.imgURL])

  return (
    <Float speed={1.75} rorationIntensity={1} floatIntensity={2}>
      <ambientLight intensity={1}/>
      <directionalLight position={[0, 0, 0.05]}/>
      <mesh castShadow receiveShadow scale={2}>
        <icosahedronGeometry args={[1,1]} />
        <meshStandardMaterial
          color='#fff8eb'
          polygonOffset
          polygonOffsetFactor={-5}
          flatShading 
        />
        <Decal
          position={[0,0,1]}
          rotation={[2* Math.PI, 0, 6.25]}
          map={decal}
          flatShading
        />
      </mesh>
    </Float>
  )
}

const BallCanvas = ({icon}) => {
  return(
    <Canvas
      frameloop='demand'
      gl={{ preserveDrawingBuffer: true }}
    >
      <Suspense fallback={<CanvasLoader />}>
        <OrbitControls 
          enableZoom={false}
        />
        <Ball imgURL={icon}/>
      </Suspense>
      <Preload all />
    </Canvas>
  )
}

export default BallCanvas

内容的提问来源于stack exchange，提问作者Timble Michael