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.
Caso muy interesante. Tengo una solución, pero no sé por qué sucede. Probablemente problema de renderizado de safari.
align-items:center de la envolturabackground-color:#001064; desde el div interno y agregue display: flex; align-items: center;background-color:#001064; y agregue 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> ...