Why isn't my SVG animation working on Safari displays?

MarcKch
May 19, 2023
273 views
0 votes
2 Answers

I have a checkmark animation that works perfectly on chrome browers. However, when it comes to safari, the svg is not displaying at all.

$('#checkmark-svg').on('click', function(){
  svg = $(this);
  svg.removeClass('run-animation').width();
  svg.addClass('run-animation');
  return false;
})

.cls-1{
  fill:none;
  stroke:#231f20;
  stroke-miterlimit:10;
  stroke-width:5px;
}

.svg-check {
  position: inherit;
}

svg {
  margin: auto;
  width: 50px;
  height: 50px;
  display: block;
  
  .cls-1 {
    stroke: #2d77e3;
  }
}

.circle {
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
}

.checkmark {
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
}

.run-animation {  
  .circle {
    animation: 2.5s circleDraw forwards;
  }

  .checkmark {
    animation: 0.75s checkmarkDraw forwards;
    animation-delay: 1s;
  }
}

@keyframes circleDraw {
  from {
    stroke-dashoffset: 700;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes checkmarkDraw {
  from {
    stroke-dashoffset: 150;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

        <svg id="checkmark-svg" class="run-animation svg-check" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 193.3 193.3">
            <circle class="cls-1 circle" cx="96.65" cy="96.65" r="94.15"/>
            <polyline class="cls-1 checkmark" points="46.9 101.4 76.9 131.4 146.4 61.9"/>
        </svg>

The JS code is simply a refresh of the animation on click and might be omitted. Also, there is no background css class which might influence its behavior.

Answers

please use webkit for animation in css


.run-animation {  
  .circle {
    -webkit-animation: 2.5s circleDraw forwards;
            animation: 2.5s circleDraw forwards;
  }

  .checkmark {
    -webkit-animation: 0.75s checkmarkDraw forwards;
            animation: 0.75s checkmarkDraw forwards;
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
  }
}

@-webkit-keyframes circleDraw {
  from {
    stroke-dashoffset: 700;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes circleDraw {
  from {
    stroke-dashoffset: 700;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes checkmarkDraw {
  from {
    stroke-dashoffset: 150;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes checkmarkDraw {
  from {
    stroke-dashoffset: 150;
  }
  to {`enter code here`
    stroke-dashoffset: 0;
  }
}

You are using the very recent CSS nesting feature, which is still not widely supported (only Chromium based browsers and the latest Safari Technology Preview, as of today).

By unnesting all your CSS rules, your code would work in all browsers, including Safari and Firefox:

$('#checkmark-svg').on('click', function() {
  svg = $(this);
  svg.removeClass('run-animation').width();
  svg.addClass('run-animation');
  return false;
})

.cls-1 {
  fill: none;
  stroke: #231f20;
  stroke-miterlimit: 10;
  stroke-width: 5px;
}

.svg-check {
  position: inherit;
}

svg {
  margin: auto;
  width: 50px;
  height: 50px;
  display: block;
}
svg .cls-1 {
  stroke: #2d77e3;
}

.circle {
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
}

.checkmark {
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
}

.run-animation .circle {
  animation: 2.5s circleDraw forwards;
}
.run-animation .checkmark {
  animation: 0.75s checkmarkDraw forwards;
  animation-delay: 1s;
}

@keyframes circleDraw {
  from {
    stroke-dashoffset: 700;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes checkmarkDraw {
  from {
    stroke-dashoffset: 150;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<svg id="checkmark-svg" class="run-animation svg-check" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 193.3 193.3">
    <circle class="cls-1 circle" cx="96.65" cy="96.65" r="94.15"/>
    <polyline class="cls-1 checkmark" points="46.9 101.4 76.9 131.4 146.4 61.9"/>
</svg>

Note that you can feature detect CSS nesting with an @supports rule:

.elem::after {
  content: "Your browser does not support CSS nesting";
  color: red;
}
@supports (selector(&)) {
  .elem::after {
    content: "Your browser supports CSS nesting";
    color: green;
  }
}

<span class=elem></span>

But that would mean you’d have to go into the trouble of unnesting for the ones that don’t support it anyway, so I’m not convinced of how useful that’d be for you.

Please signup or login to give your own answer.

Click here to cancel reply.

Why isn’t my SVG animation working on Safari displays?

Answers