如何修复我的圈子进度栏以在Safari中工作？

Question

enter image description here 我已经完成了我的投资组合。我专注于纯CSS和一些JavaScript。我的技能区域上有圈进度栏。不幸的是，进度条在Safari上无法正常工作。您能帮我找出解决方法吗？

       <div class="box ">
        <div class="circle-wrap show ">
          <div class="mask full-3">
            <div class="fill fill-3"></div>
          </div>
          <div class="mask">
            <div class="fill fill-3"></div>
          </div>
          <div class="inside-circle">
         </div>
        </div>
      </div>

以下是代码https://codepen.io/vasswann/pen/VNpdNe的codpen链接

这是我正在使用https://www.istvanvas.com/的网站

$color-grey-light-4: #ccc;
$secondary-color: #8b0000;
$color-white: #fff;
$dark-color: #252323;
$width-sass: 144deg; // 180 * 0.8 = 144deg 80%

.circle-wrap {
  position: relative;
  margin: 5rem auto;
  width: 220px;
  height: 220px;
  background: $color-grey-light-4;

  border-radius: 50%;
  text-align: center;
  transition: opacity 1s ease-in;
  visibility: hidden;
  opacity: 0;

  .mask,
  .fill {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 50%;
  }

  .mask {
    -webkit-clip: rect(0px, 220px, 220px, 110px);
    clip: rect(0px, 220px, 220px, 110px);
    .fill {
      -webkit-clip: rect(0px, 110px, 220px, 0px);
      clip: rect(0px, 110px, 220px, 0px);
      background-color: $secondary-color;
    }
  }
.inside-circle {
    width: 85%;
    height: 85%;
    border-radius: 50%;
    background: $color-white;
    z-index: 10;
    position: absolute;
    transition: all 0.2s ease-in-out;
    // display: grid;
    font-size: 30px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    &:hover .inside-circle-perc {
      opacity: 1;
    }
  }
}
.show {
  visibility: visible;
  opacity: 1;
  .mask.full-3,
  .fill-3 {
    animation: fillSass ease-in-out 3s 2s;
    animation-fill-mode: forwards;
  }
}
@keyframes fillSass {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate($width-sass);
  }
   }