Question

我有一些CSS转换发生在click事件和悬停时。转换在Chrome和Firefox中可以正常工作，但在Safari中则不能。在Safari中，转换会在开始之前重置边界半径和不透明度。

元素的密码笔：https://codepen.io/IamJoshing/pen/yqxaYa

我正在使用引导程序4，这是我添加的代码：

string3

我该如何解决？

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

Answer 2

You can add Prefix for safari
@-webkit-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;

    }
}

仅在Safari中变换动画的中断

2 个答案: