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;
  }
}

}`