SVG animation breaks in img tag on different zoom levels in macOS Safari

user_12018281 0
Viewed 46

I have an SVG animation which runs well on every browser. But, when zoomed in on Safari, the animation breaks. It looks like the animation is bleeding through the right and bottom edges.

And, this only happens when the SVG is in an img tag. If the SVG is used inline, there is no issue as such.

When the page is zoomed in to 125% on macOS Safari, you'll get,

enter image description here

At first, it looked like an issue with my screen or with my personal preferences set in my browser. But, this is a real issue that I could reproduce on other machines too and also with other animated SVGs. For example, open up https://loading.io/spinner or http://samherbert.net/svg-loaders/ in macOS Safari with a zoom level other than 100% as you'll see the same behavior.

Snippet (save this SVG as a .svg image and use it in an img tag to reproduce this behavior)

<svg width="36" height="36" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25" />
  <path d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z">
    <animateTransform
      attributeName="transform"
      type="rotate"
      dur="0.75s"
      values="0 12 12;360 12 12"
      repeatCount="indefinite"
    />
  </path>
</svg>

svg css html javascript
1 Answers

I could reproduce this rendering bug on Otter Browser on windows (also webkit based) and found a kind of workaround:

Once the html body contains an inlined svg element with an <animateTransform> definition – SMIL animations in <img> tags will be rendered correctly.

In my tests you can append a hidden pseudo animation (not containing any animated element) like this:

<svg style="position:absolute; width:0; height:0; overflow:hidden;" >
    <animateTransform  
    repeatCount="indefinite" 
    dur="1s" 
    attributeName="transform" />
</svg>

So it doesn't need to be the exact animation as used in the svg file.

Example: add animation fix via js:

function addAnimateFix() {
  let svgFix =
    `<svg style="position:absolute; width:0; height:0; overflow:hidden;" >
                    <animateTransform  
                    repeatCount="indefinite" 
                    dur="1s" 
                    attributeName="transform" />
        </svg>`;

  document.body.insertAdjacentHTML('beforeend', svgFix)
}
<p><button type="button" onclick="addAnimateFix()">addAnimateFix</button></p>
<img height="200px" width="200px" src="https://svgshare.com/i/ia5.svg" alt="">
<img height="200px" width="200px" src="https://svgshare.com/i/i_v.svg" alt="">

Alternative workaround

background-image is apparently not affected by this bug.
So setting a background image on your image or wrapping parent element (like <figure>) could be a viable option.

user_150156750
Related