CSS анимация на Mac против Windows - PullRequest
Новая
       9

CSS анимация на Mac против Windows

0 голосов
/ 11 октября 2018

Я пытаюсь создать вращающуюся анимацию, но я столкнулся с некоторыми проблемами, связанными с разницей между окнами и дисплеями Mac.

Анимация - это довольно простой круговой вращатель, созданный с использованием HTML и CSS 

<div class="cow-spinner">
 <span></span>
 <span></span> 
 <span></span>
 <span></span> 
</div>

и некоторые базовые css: 

.cow-spinner {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.cow-spinner span {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 51px;
  height: 51px;
  margin: 6px;
  border: 3px solid black;
  border-radius: 50%;
  animation: cow-spin 1.2s ease-in-out infinite;
  border-color: black transparent transparent transparent;
}
.cow-spinner span:nth-child(1) {
  animation-delay: -0.45s;
}
.cow-spinner span:nth-child(2) {
  animation-delay: -0.3s;
}
.cow-spinner span:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes cow-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Сама анимация работает отлично, с рабочим примером здесь: https://codepen.io/fatoilyguy/pen/oaZMMp

Моя проблема в том, что на Mac сам кругимеет ровные края с одинаковой шириной, например: enter image description here

, но в окнах круг имеет пикселизацию и странные изменения ширины:

enter image description here

Из того, что я вижу, нет разницы между браузерами на любой платформе.Можно ли как-то предотвратить эту разницу между платформами?

1 Ответ

0 голосов
/ 11 октября 2018

Вы можете попробовать подход SVG и проверить, хорошо ли рендеринг везде 

   
.loader {
  display: inline-block;
  height: 100px;
  width: 100px;
  transform: rotateZ(0deg); 
  animation: rotate 1.5s linear infinite;
}

svg {
  max-width: 140px;
  max-height: 140px;
  fill: none;
  stroke: #9bc;
  stroke-width: 5px;
  stroke-dasharray: 301px;
  stroke-dashoffset: 200px;
  animation: path 1.5s linear 0s infinite;
}

@keyframes path {
  60%  { stroke-dashoffset: 40px;  }
  100% { stroke-dashoffset: 200px; }
}


@keyframes rotate {
  100% { transform: rotateZ(360deg) }
}
<div class="loader">
  <svg viewport="0 0 100 100" preserveAspectRatio="xMidYMid meet">
    <path d="M 50, 50 m -48, 0 a 48,48 0 1,0 96,0 a 48,48 0 1,0 -96,0" />
  </svg>
</div>
...