Как я могу исправить свой индикатор выполнения круга, чтобы работать на сафари? - PullRequest
2 голосов
/ 10 апреля 2019

введите описание изображения здесь Я закончил свое портфолио. Я был сосредоточен на чистом 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

Вот мой сайт, где я использую 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);
  }
   }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...