CSS动画使Safari（iOS + Mac）中的其他样式崩溃

Question

我们在移动网站上有一个不错的CSS动画（摆动水平）（http://animista.net/play/attention/wobble/wobble-hor-top）。效果很好，但是在Safari中加载网站时（iOS和Mac OS）。在一页上，我们有一些带有边框半径的图像：50％，并且在播放摆动时，边框半径不起作用。

当我们加载页面时，首先边界半径很好，当开始摆动时，边界半径消失了（图像现在是正方形img），并且当摆动完成其工作时，边界半径又回来了

您是否知道我们如何强制边界半径？

在边界半径之后，我尝试过！important，但这不起作用。

可疑：

.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);
    }
}

具有边界RADIUS的图像：

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