CODEWITHSUNDEEP
angularsvgsass
Julio Orellana
Julio Orellana

Reputation: 97

SVG showing wrong on Safari 12

I have a countdown SVG working on Angular+2, it goes red 10 seconds before ends. On Chrome and Firefox style works well but on Safari it shows wrong as you can see on images. I need it to show the same style on Chrome and Safari. I have been trying everything with overflow but it doesn't work.

SVG image on Chrome:

Chrome SVG

SVG image on Safari:

Safari SVG

Angular html code:

<!-- Countdown timer animation Mobile -->
<div [className]="myClass">
  <svg style="fill: rgba (0,0,0,0.0001);" width="136" height="136" *showItSizes="{max: 767}">
    <circle r="64" cy="64" cx="63"></circle>
  </svg>
</div>

<!-- Countdown timer animation Desktop-->
<div [className]="myClass">
  <svg style="fill: rgba (0,0,0,0.0001);" width="146" height="145" *showItSizes="{min: 768}">
    <circle r="69.85699" cy="66" cx="68"></circle>
  </svg>
</div>

<!-- countdown container -->
<div class="logout-card__countdown">
  <p class="logout-card__countdown--start">{{start}}</p>
  <span class="logout-card__countdown--text">segundos</span>
</div>

SCSS for SVG: 

svg {
    position: relative;
    top: 13px;
    transform: rotateY(-180deg) rotateZ(-90deg);
    fill: rgba (0,0,0,0.0001);

    border-radius: 50%;
    overflow: visible;

    circle {
      stroke-dasharray: 410px;
      stroke-dashoffset: 0px;
      stroke-linecap: round;
      stroke-width: 11px;
      fill-opacity: 0.01;
      animation: countdown 60s linear forwards;
    }

    @keyframes countdown {
      from {
        stroke-dashoffset: 0px;
      }
      to {
        stroke-dashoffset: 410px;
      }
    }
  }

  &__countdown{
    position: relative;
    bottom: 114px;

    &--start{
      font-size: 50.5px;
      font-weight: 300;
    }

    &--text{
      font-weight: 600;
      font-size: 14px;
    }
  }

Upvotes: 0

Views: 1573

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101888

I'm not entirely surprised you are having problems. You are mixing 3D transforms, overflow and border radiuses.

I suggest you fix your SVG:

  • Make the SVG the correct size instead of relying on overflow.
  • Get rid of the border radius. I'm not even sure why you have it.
  • Use a simple rotate transform inside the SVG, and adjust your animation to get the countdown going in the correct direction.

I can't test with Safari, but I'm hoping this simplified version works better for you. It should do:

svg {
  fill: rgba (0,0,0,0.0001);
}

svg circle {
  stroke-dasharray: 440px;
  stroke-dashoffset: 0px;
  stroke-linecap: round;
  stroke-width: 11px;
  fill-opacity: 0.01;
  animation: countdown 60s linear forwards;
  stroke: orange;
}

@keyframes countdown {
  to {
    stroke-dashoffset: -440px;
  }
}
<!-- Countdown timer animation Desktop-->
<div className="myClass">
  <svg width="152" height="152">
    <circle r="70" cx="76" cy="76" transform="rotate(-90,76,76)"/>
  </svg>
</div>

Update

I forgot that Safari has a bug where it doesn't correctly handle negative stroke-dashoffset values. Here's a new version with a workaround.

svg {
  fill: rgba (0,0,0,0.0001);
}

svg circle {
  stroke-dasharray: 440px;
  stroke-dashoffset: 880px;
  stroke-linecap: round;
  stroke-width: 11px;
  fill-opacity: 0.01;
  animation: countdown 60s linear forwards;
  stroke: orange;
}

@keyframes countdown {
  to {
    stroke-dashoffset: 440px;
  }
}
<!-- Countdown timer animation Desktop-->
<div className="myClass">
  <svg width="152" height="152">
    <circle r="70" cx="76" cy="76" transform="rotate(-90,76,76)"/>
  </svg>
</div>

Upvotes: 1

Related Questions