SVG 滤波湍流将作用于 p 元素，但不适用于 div

问：

（适用于 Chrome 桌面版，但不适用于移动设备，不适用于 Safari）

我将 SVG 湍流过滤器应用于 p 元素和 div。我正在使用GSAP进行动画处理，特别是基本频率和比例。这取决于鼠标速度。它在两个元素的 chrome 上都完美运行，但仅适用于 safari 中的 p 元素。在移动设备中，它也不起作用。这是要测试的完整实时站点：故障站点

我正在使用 react 和 gsap。当鼠标速度较快时，动画会触发，在移动设备上，如果您点击屏幕，动画会触发。我保留了与此相关的代码。当您在实时站点上打开日志时，您可以看到基本频率和比例的值正在发生变化。过滤器不适用于 canvas div 元素？

关于为什么会发生这种情况的任何线索？？

APP JS

    const App = () => {
    
      const distortBF = useRef(null);
      const distortSCL = useRef(null);
      const waveBF = useRef(null);
      const waveSCL = useRef(null);
    
      const handleTap = () => {
             gsap.fromTo(distortBF.current, { attr: { baseFrequency: "0 0" }}, { attr: { baseFrequency: "0.2 0.08" }, duration: 1, ease: 'ease', yoyo:true }); 
             gsap.fromTo(distortSCL.current, { attr: { scale: "0" }}, { attr: { scale: "90" }, duration: 1, ease: 'ease', yoyo:true })
             gsap.fromTo(waveBF.current, { attr: { baseFrequency: "0" }}, {  attr: {baseFrequency: "0.2 0.08" }, duration: 1 })
             gsap.fromTo(waveSCL.current, { attr: { scale: "0" }}, {  attr: { scale: "10" }, duration: 1 })
       };
   
   const onMouseMove  = () => {
      glitchOut(mouseSpeed)
    }
    
        function glitchOut() {
          gsap.fromTo(distortBF.current, { attr: { baseFrequency: "0 0" }}, { attr: { baseFrequency: "0.2 0.08" }, duration: 1, ease: 'ease', yoyo:true }); 
          gsap.fromTo(distortSCL.current, { attr: { scale: "0" }}, { attr: { scale: "90" }, duration: 1, ease: 'ease', yoyo:true })
          gsap.fromTo(waveBF.current, { attr: { baseFrequency: "0" }}, {  attr: {baseFrequency: "0.2 0.08" }, duration: 1 })
          gsap.fromTo(waveSCL.current, { attr: { scale: "0" }}, {  attr: { scale: "10" }, duration: 1 })
          }
      return (
        <>
          <div onMouseMove={onMouseMove} onTouchStart={handleTap}>
        
                <p className='diction'
                style={{ filter: 'url(#distort)' }}
                >
            'Learning...'
          </p>
            <main
              ref={mainRef}
              style={{background: '#BABABA'}}>
              <Canvas camera={{ position: [0, 0, 150] }} style={{ filter: 'url(#distort)' }}>
                   
                <Eyes mousePosition={mousePosition} deviceOrientation={null} />
              </Canvas>
            </main>
          </div>
          <svg version="1.1" height="0" width="0">
            <defs>
             <filter id='wave'>
                <feTurbulence ref={waveBF}
                   type="turbulence"
                   baseFrequency="0.05"
                   numOctaves="2"
                   result="turbulence" />
                    <feDisplacementMap ref={waveSCL}
                   in2="turbulence"
                   in="SourceGraphic"
                   scale="00"
                   xChannelSelector="R"
                   yChannelSelector="G">
                 </feDisplacementMap>
             </filter>
              <filter id="distort">
                <feTurbulence ref={distortBF}
                   type="turbulence"
                   baseFrequency="0 0"
                   numOctaves="2"
                   result="turbulence" />
                <feDisplacementMap ref={distortSCL}
                   in2="turbulence"
                   in="SourceGraphic"
                   scale="1"
                   xChannelSelector="R"
                   yChannelSelector="G" />
             </filter>
            </defs>
          </svg>
        </>
      );
    };
    
    export default App;