Я использую этот удивительный CodePen фаз Луны: https://codepen.io/xaelan/full/arLJEL.
Но на настольном компьютере Safari и в мобильных браузерах div, содержащий свет, рендерит больше, чем изображение луны.Проверьте CodePen в Safari, чтобы увидеть проблему.
Я не могу понять, что является причиной этой ошибки.Есть идеи?
Я думаю, что это как-то связано с CSS для этого div:
.light {
box-sizing: border-box;
width: 20rem;
height: 20rem;
background-color: $shadow;
border-radius: 50%;
animation: cycle 80s linear infinite reverse;
animation-delay: -10s;
filter: blur(0.5rem);
}
Обновление : я обнаружил, что если я закомментирую свойство transformв анимации ключевых кадров визуальный сбой исчезает, хотя мы теряем вращение.
Вот анимация:
@keyframes cycle {
0% {
border-left: 5rem solid $sunlight;
border-right: 10rem solid $shadow;
background-color: $shadow;
// transform: rotate(-10deg);
}
24.9999% {
background-color: $shadow;
}
25% {
border-left: 10rem solid $sunlight;
border-right: 10rem solid $shadow;
background-color: $sunlight;
}
50% {
border-left: 0 solid $sunlight;
border-right: 0 solid $shadow;
background-color: $sunlight;
// transform: rotate(0deg);
}
50.0001% {
border-left: 0 solid $shadow;
}
74.9999% {
background-color: $sunlight;
border-right: 0 solid $sunlight;
}
75% {
border-left: 10rem solid $shadow;
border-right: 10rem solid $sunlight;
background-color: $shadow;
}
100% {
border-left: 10rem solid $shadow;
border-right: 0 solid $sunlight;
background-color: $shadow;
// transform: rotate(10deg);
}
}