CSS-анимация приводит к сбою других стилей в Safari (iOS + Mac) - PullRequest
Новая
       10

CSS-анимация приводит к сбою других стилей в Safari (iOS + Mac)

0 голосов
/ 21 мая 2019

На нашем мобильном веб-сайте есть хорошая CSS-анимация (wobble-hor-top) (http://animista.net/play/attention/wobble/wobble-hor-top).. Она работает хорошо, но при загрузке веб-сайта в Safari (iOS и Mac OS). На одной странице у нас есть несколько изображения с радиусом границы: 50%, и когда воспроизводится колебание, радиус границы не работает.

Когда мы загружаем страницу, вначале хорош граничный радиус, при запуске колебания граничный радиус исчезает (изображение теперь является квадратным img), а когда колебание завершило свою работу, граничный радиус вернулся .

Ты хоть представляешь, как мы можем форсировать радиус границы?

Я пробовал! Важный после радиуса границы, но это не работает.

КОЛЕБАНИЕ: 

.wobble-hor-top {
    -webkit-animation: wobble-hor-top 5s ease-in-out 1s both;
    animation: wobble-hor-top 5s ease-in-out 1s both;
}


@-webkit-keyframes wobble-hor-top {
    0%,
    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }
    15% {
        -webkit-transform: translateX(-30px) rotate(6deg);
        transform: translateX(-30px) rotate(6deg);
    }
    30% {
        -webkit-transform: translateX(15px) rotate(-6deg);
        transform: translateX(15px) rotate(-6deg);
    }
    45% {
        -webkit-transform: translateX(-15px) rotate(3.6deg);
        transform: translateX(-15px) rotate(3.6deg);
    }
    60% {
        -webkit-transform: translateX(9px) rotate(-2.4deg);
        transform: translateX(9px) rotate(-2.4deg);
    }
    75% {
        -webkit-transform: translateX(-6px) rotate(1.2deg);
        transform: translateX(-6px) rotate(1.2deg);
    }
}
@keyframes wobble-hor-top {
    0%,
    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }
    15% {
        -webkit-transform: translateX(-30px) rotate(6deg);
        transform: translateX(-30px) rotate(6deg);
    }
    30% {
        -webkit-transform: translateX(15px) rotate(-6deg);
        transform: translateX(15px) rotate(-6deg);
    }
    45% {
        -webkit-transform: translateX(-15px) rotate(3.6deg);
        transform: translateX(-15px) rotate(3.6deg);
    }
    60% {
        -webkit-transform: translateX(9px) rotate(-2.4deg);
        transform: translateX(9px) rotate(-2.4deg);
    }
    75% {
        -webkit-transform: translateX(-6px) rotate(1.2deg);
        transform: translateX(-6px) rotate(1.2deg);
    }
}

ИЗОБРАЖЕНИЕ С ГРАНИЦОМ РАДИУСА: 

.employee-thumb__image figure {
    border-radius: 50%!important;
    padding-top: 100%;
    overflow: hidden;
    position: relative;
}
...