Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

400
Vistas
Stripes over the SVG when moving an element in Safari

When I try to move a child div on top of an SVG, the SVG starts to have weird vertical stripes. This only happens on Safari (I tested on iPad, iPhone, Mac, PC both Chrome and Safari).

To see the bug, position your cursor over the image, and move to the right. If it doesn't appear, please just shorten the width of the screen.

Reproduction of this bug (vercel.app)

GIF Preview - This is how appears

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

Repository of this specific bug

This bug is definitely specific to Safari: However, from personal experience, I have seen this behavior through other projects where the browser is not a problem for the bug to appear. But I can't find a solution or an explanation.

How can I fix it, or at least why does it happen?

Thanks in advance.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Very interesting case. I have a fix, but I don't know why it happen. Probably safari rendering issue.

  1. remove align-items:center from wrapper
  2. remove background-color:#001064; from inner div and add display: flex; align-items: center;
  3. add another div as text wrapper and set again background color background-color:#001064; and add 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>
...
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda