Stripes over the SVG when moving an element in Safari

user_17192910 0
Viewed 96

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.

safari svg html javascript
1 Answers

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>
...
user_188820840
Related