Timer does not display properly in Safari

[kdbeall]

I'm submitting a ...
[ x] bug report
[ ] feature request
[ ] support request

Steps to Reproduce
When using the timer with Safari
the circle does not display properly.

Related code:
Timer Progress

Important information:
MacOS 10.13.4
Safari 11.1

[UsherNet]

This issue is still happening which effects using it on an Ionic App with iOS. Any updates please?

[kdbeall]

@UsherNet I would just do it yourself. I had good results with rxjs.

[danielantoniobs]

@UsherNet I would just do it yourself. I had good results with rxjs.

@kdbeall Please can you share your solution ? Thanks!

[UsherNet]

I modified the CSS until I got it working:

`.radial-progress {
$circle-size: 250px;
$circle-background: #d6dadc;
$circle-color: seagreen;
$inset-size: 180px;
$inset-color: #fbfbfb;
$transition-length: 1s;
$shadow: 6px 6px 10px rgba(0,0,0,0.2);
$percentage-color: seagreen;
$percentage-font-size: 28px;

margin: 50px;
width: $circle-size;
height: $circle-size;
background-color: $circle-background;
border-radius: 50%;

.circle {
  .fill,
  .mask,
  .shadow {
    width: $circle-size;
    height: $circle-size;
    position: absolute;
    border-radius: 70%;
  }

  .shadow {
    box-shadow: $shadow inset;
  }

  .fill,
  .mask {
    // backface-visibility: hidden;
    // transition: transform $transition-length;
    //-webkit-transition: -webkit-transform $transition-length;
    border-radius: 50%;
  }

  .mask {
    clip: rect(0px, $circle-size, $circle-size, $circle-size/2);
    

    .fill {
      clip: rect(0px, $circle-size/2, $circle-size, 0px);
      background-color: $circle-color;
    }
  }
}

.inset {
  width: $inset-size;
  height: $inset-size;
  position: absolute;
  margin-left: ($circle-size - $inset-size)/2;
  margin-top: ($circle-size - $inset-size)/2;
  background-color: $inset-color;
  border-radius: 50%;
  box-shadow: $shadow;

  .percentage {
    width: 100%;
    position: absolute;
    top: ($inset-size - $percentage-font-size) / 2;
    line-height: 1;
    text-align: center;
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: $percentage-color;
    font-weight: 800;
    font-size: $percentage-font-size;
  }
}

}`