CODEWITHSUNDEEP
google-chromeanimationsvg
Guilherme Rudnitzki
Guilherme Rudnitzki

Reputation: 309

How to workaround a bug in SVG rotation CSS on Chrome 73?

I use a SVG image that mimics the Google loading animated icon:

After installing Chrome 73, the rotation of the SVG became erratic.

Please see this code:

<style>.circular-loading{position:absolute;top:50%;left:50%;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);padding:10px;background:#fafafa;width:50px;height:50px;border-radius:50%;}</style>
<img src="https://www.perfumes.com.br/images/circular-loading.svg" class="circular-loading">

https://codepen.io/grudnitzki/pen/LavYWK

In Firefox and Edge the rotation still works fine.

Any workarounds?

Upvotes: 2

Views: 1135

Answers (2)

Kaiido
Kaiido

Reputation: 136715

They seem to have issues with the viewBox translation and also with the transform-origin of the root <svg> element. Setting the viewBox to 0 0 50 50 and translating your circle by -25, along with wrapping it in a <g> that will get the rotation fixes it:

const svg = `<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px">
  <style>
    .circular{animation:rotate 2s linear infinite; transform-origin:center}
    .path{stroke-dasharray:1,200;stroke-dashoffset:0;animation:dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite;stroke-linecap:round;}
    @keyframes rotate{100%{transform: rotate(360deg);}}
    @keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0;}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px;}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px;}}
    @keyframes color{100%,0%{stroke:#db4235;}40%{stroke:#0057e7;}66%{stroke:#008744;}80%,90%{stroke:#ffa700;}}
  </style>
  <g class="circular">
    <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
  </g>
</svg>`;
img.src = URL.createObjectURL(new Blob([svg], {type:'image/svg+xml'}))
.circular-loading{position:absolute;top:50%;left:50%;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);padding:10px;background:#fafafa;width:50px;height:50px;border-radius:50%;}
<img id="img" class="circular-loading">

And if you don't wish to insert a new <g> element, then you could also just set the rotate animation on the <circle> directly (after fixing the viewBox):

const svg = `<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px">
  <style>
    .path{stroke-dasharray:1,200;stroke-dashoffset:0;animation:dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite,rotate 2s linear infinite;;stroke-linecap:round;transform-origin:center}
    @keyframes rotate{100%{transform: rotate(360deg);}}
    @keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0;}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px;}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px;}}
    @keyframes color{100%,0%{stroke:#db4235;}40%{stroke:#0057e7;}66%{stroke:#008744;}80%,90%{stroke:#ffa700;}}
  </style>
  <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
</svg>`;
img.src = URL.createObjectURL(new Blob([svg], {type:'image/svg+xml'}))
.circular-loading{position:absolute;top:50%;left:50%;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);padding:10px;background:#fafafa;width:50px;height:50px;border-radius:50%;}
<img id="img" class="circular-loading">

Upvotes: 1

Duannx
Duannx

Reputation: 8726

Maybe it's a bug of new chrome version. You should report it to google. For now, to fix your problem, you can use svg code in HTML, and do position for the parent div.

.circular-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  padding: 10px;
  background: #fafafa;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
<div class="circular-loading">
  <svg xmlns="http://www.w3.org/2000/svg" class="circular" viewBox="25 25 50 50" width="50px" height="50px" style="&#10;    /* position: absolute; */&#10;    /* top: 50%; */&#10;    /* left: 50%; */&#10;    /* box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),   0 1px 5px 0 rgba(0, 0, 0, 0.12); */&#10;    /* padding: 10px; */&#10;    /* background: #fafafa; */&#10;    /* width: 50px; */&#10;    /* height: 50px; */&#10;    /* border-radius: 50%; */&#10;"><style>.circular{animation:rotate 2s linear infinite;}.path{stroke-dasharray:1,200;stroke-dashoffset:0;animation:dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite;stroke-linecap:round;}@keyframes rotate{100%{transform: rotate(360deg);}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0;}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px;}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px;}}@keyframes color{100%,0%{stroke:#db4235;}40%{stroke:#0057e7;}66%{stroke:#008744;}80%,90%{stroke:#ffa700;}}</style><circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/></svg>
</div>

Upvotes: 1

Related Questions