Search code examples
htmlcsssvgcss-animationsopera

CSS background SVG animation strange behavior in Opera

I have a problem with behavior of CSS background SVG animation in different browsers. It used to work perfectly few months ago (including Opera) but now it behaves strangely in Opera. It appears to work in other browsers.

How to fix it?

OPERA:

As you can see the spinner is jumping to the upper left corner.

Opera

----------------------------------

OTHER BROWSERS:

enter image description here

CODE:

#spinner{
    width:200px;
    height:200px;
    background-color:#343a40;
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg id='a' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E%23a%7Banimation:faspin 2s infinite linear%7D%40keyframes faspin%7B0%25%7Btransform%3Arotate%280deg%29%7D100%25%7Btransform%3Arotate%28360deg%29%7D%7D%3C/style%3E%3Cpath fill='%23fff' d='M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-size:80%;
    background-position:50%;
}
<div id="spinner"></div>

HTML version of animation

/*DEMO PURPOSE*/
body{background:#343a40}
svg{width:100px;height:100px}
<svg id='a' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'>
    <style>
        #a{animation:faspin 2s infinite linear}
        @keyframes faspin{
            0%{transform:rotate(0deg)}
            100%{transform:rotate(360deg)}
        }
    </style>
    <path fill='#fff' d='M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z'/>
</svg>

Solution

  • Instead of animating the svg #a I'm animating the path. In order to make it work I'm using path{animation:faspin 2s infinite linear;transform-box: fill-box;transform-origin: 50% 50%;}

    #spinner{
    width:200px;
    height:200px;
    background-color:#343a40;
    background-image: url("data:image/svg+xml,%3Csvg id='a' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E path%7Banimation:faspin 2s infinite linear;transform-box: fill-box;transform-origin: 50%25 50%25;%7D @keyframes faspin%7B 25%25%7Btransform:rotate(80deg)%7D 100%25%7Btransform:rotate(360deg)%7D %7D %3C/style%3E%3Cpath fill='white' d='M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-size:80%;
    background-position:50%;
}
    <div id="spinner"></div>

    The SVG you are using for the background is now looking like this:

    body{background:black}

svg{width:90vh}
    <svg id='a' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'>
  <style>
    path{animation:faspin 2s infinite linear;transform-box: fill-box;transform-origin: 50% 50%;}
    @keyframes faspin{
      25%{transform:rotate(80deg)}
      100%{transform:rotate(360deg)}
    }
    </style><path fill='white' d='M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z'/></svg>

    I hope it helps.