Блог

 $skeleton-gray: $neutral200; // #e8e8e8
$skeleton-hilite: $neutral100; // #f8f8f8
$skeleton-hilite-size: 150px;

@keyframes skeleton-swipe {
    0% {
        background-position: $skeleton-hilite-size*-1 0;
    }
    50%, 100% {
        background-position: calc(#{$skeleton-hilite-size}   100%) 0;
    }
}

.coverPhoto {
    background: no-repeat left / $skeleton-hilite-size $skeleton-gray linear-gradient(100deg, $skeleton-gray, $skeleton-hilite, $skeleton-gray);
    animation: skeleton-swipe 1.75s ease-in-out infinite;
}
 

У меня есть код выше. В Google Chrome анимация должна создавать градиент, который перемещается слева направо и заполняет все поле. В Safari анимация занимает только половину коробки. Может кто-нибудь, пожалуйста, помочь? Вот как это выглядит в Safari. Обратите внимание, что градиент заполняет только половину поля, а не все поле целиком.