在Safari中移动元素时SVG上的条纹

Question

当我尝试在SVG上移动一个孩子Div时，SVG开始具有怪异的垂直条纹。这仅在Safari上发生（我在iPad，iPhone，Mac，PC上测试了Chrome和Safari）。

要查看错误，请将光标放在图像上，然后向右移动。如果没有出现，请缩短屏幕的宽度。

此错误的复制（vercel.app）

    function App() {
      const [delta, setDelta] = useState(0);
    
      const handleTouchMove = (event) => {
        let delta = event.touches[0].clientX;
        setDelta(delta);
      };
    
      const handleMouseMove = (event) => {
        let delta = event.clientX + 40;
        setDelta(delta);
      };
    
    
      return (
        <div
          style={{
            background: "#5f5fc4",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            border: "1px solid #413793"
          }}
        >
          <svg
            width="500"
            height="500"
            onTouchMove={handleTouchMove}
            onMouseMove={handleMouseMove}
            style={{ background: "#283593" }}
          >
            <g>
              <foreignObject x="0" y="0" width="500" height="500">
                <picture>
                  <img
                    alt=""
                    width="100%"
                    src="https://i.imgur.com/h1vMJwO.png"
                  />
                </picture>
              </foreignObject>
            </g>
          </svg>
            <div style={{ width: delta, background: "#001064", color: "white", fontSize: '1.2rem' }}>
              Another div here with {delta}px.
            </div>
        </div>
      );
    }

​src/app.js“ rel =“ nofollow noreferrer”>此特定错误的存储库

此错误绝对是Safari的特定特定的：但是，从个人经验来看，我已经通过其他项目看到了这种行为，浏览器不是一个项目出现错误的问题。但是我找不到解决方案或解释。

我该如何修复它，或者至少为什么会发生？

预先感谢。

Answer 1

非常有趣的情况。
我有一个修复程序，但我不知道为什么会发生。可能是Safari渲染问题。

1. 删除Align-Items：Center从包装器中
2. 删除背景色：＃001064;从Inner Div和add display：flex; Align-Items：Center;
3. 将另一个Div添加为文本包装器，然后再次设置背景颜色backick-color：＃001064;并添加width：100％。

...
  <div
          style={{
            background: "#5f5fc4",
            display: "flex",
            justifyContent: "center",
            border: "1px solid #413793"
          }}
        >
          <svg
            width="500"
            height="500"
            onTouchMove={handleTouchMove}
            onMouseMove={handleMouseMove}
            style={{ background: "#283593" }}
          >
            <g>
              <foreignObject x="0" y="0" width="500" height="500">
                <picture>
                  <img
                    alt=""
                    width="100%"
                    src="https://i.imgur.com/h1vMJwO.png"
                  />
                </picture>
              </foreignObject>
            </g>
          </svg>
            <div style={{ width: delta, color: "white", fontSize: '1.2rem', display:"flex", alignItems:"center" }}>
               <div style={{width:"100%",background: "#001064"}}>
                 Another div here with {delta}px.
               </div>
            </div>
        </div>
...