Cuando trato de mover un div secundario encima de un SVG, el SVG comienza a tener rayas verticales extrañas. Esto solo sucede en Safari (lo probé en iPad, iPhone, Mac, PC tanto en Chrome como en Safari).

Para ver el error, coloque el cursor sobre la imagen y muévase hacia la derecha. Si no aparece, acorte el ancho de la pantalla.

Reproducción de este error (vercel.app)

Vista previa de GIF: así es como aparece

 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> ); }

Repositorio de este error específico

Este error es definitivamente específico de Safari: Sin embargo, por experiencia personal, he visto este comportamiento a través de otros proyectos donde el navegador no es un problema para que aparezca el error. Pero no puedo encontrar una solución o una explicación.

¿Cómo puedo solucionarlo, o al menos por qué sucede?

Gracias por adelantado.