css - 仅在 Safari 中转换动画的中断

Question

我有一些在点击事件和悬停时发生的 CSS 转换。转换在 Chrome 和 Firefox 中运行良好，但在 Safari 中运行不佳。在 Safari 中，转换会在开始前重置边界半径和不透明度。

元素代码笔:https://codepen.io/IamJoshing/pen/yqxaYa

我正在使用 bootstrap 4，这是我添加的代码:

.testimonials .testimonial-item > img{
    border-radius: 30px;
    opacity: .5;
    padding: 15px;
}
.testimonials .testimonial-item.active > img{
    animation: SHWimg 1s;
    animation-fill-mode: both;
}
@keyframes SHWimg {
    from {
        -webkit-transform: -webkit-scale(1);
        -moz-transform:scale(1);
        -o-transform:scale(1);
        transform:scale(1);     
        border-radius: 30px;
        padding: 15px;
    }
    to {
        -webkit-transform: -webkit-scale(1);
        -moz-transform:scale(1);
        -o-transform:scale(1);
        transform: scale(1);
        border-radius: 20px;
        padding: 0px;

    }
}
.testimonials .testimonial-item.active > img{
    border-radius: 20px;
    opacity: 1;
    padding: 0;
}
.testimonials .testimonial-item > img:hover {
    border-radius: 30px;
    cursor: pointer;
    -webkit-transition: opacity 1.5s ease;
    -moz-transition: opacity 1.5s ease;
    -o-transition: opacity 1.5s ease;
    transition: opacity 1.5s ease;
    opacity: 1 !important;
}

我该如何解决这个问题？

Answer 1

我认为主要问题与 padding + border-radius 组合有关。

请看下面的示例，虽然第二张图片与第一张图片的边框半径完全相同，但实际上由于填充而没有显示任何内容，第三张图片解释了为什么会这样。

img {
  vertical-align: middle;
  border-radius: 30px;
}

.padding {
  padding: 30px;
}

.border {
  border: 1px solid red;
}

<img src="http://placekitten.com/g/90/90">
<img src="http://placekitten.com/g/90/90" class="padding">
<img src="http://placekitten.com/g/90/90" class="padding border">

作为您的情况的解决方法，我建议使用 transform: scale() 而不是 padding 来控制图像大小。初始设置transform: scale(0.75)，然后在动画中将其更改为transform: scale(1)。

Updated Pen