html - html5 - 悬停在 safari 上的圆形图像上
问题描述
我的网站有问题。我有一个视频 https://drive.google.com/file/d/1MWCynYB64jxXPYpYaa3LkplrwWGf1Xko/view
它只发生在 safari 上。
HTML
<div class="item">
<div class="img-wrapper">
<img class='img'>
</div>
</div>
CSS
.img-wrapper {
width: 220px;
height: 220px;
border: solid 8px #ffffff;
border-radius: 110px;
overflow: hidden;
}
.img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-webkit-transition: 0.2s;
transition: 0.2s;
border-radius: 110px;
}
.item:hover .img-wrapper img {
transform: scale(1.1);
}
它在所有其他浏览器上都能正常工作(图像在边框内放大时)。
解决方案
过渡似乎有问题。
.item:hover .img-wrapper img {
transform: scale(1.1);
transition: 0;
}
推荐阅读
- python - 如何解决numpy数组上的符号方程?
- php - Codeigniter 4 - 后 600 输入 - 不返回数据
- flutter - Flutter 中的 await 关键字不等待
- image - 使用 imagefolder 将 png 图像组加载到 colab 时出错
- python - Databricks 中的 Python import simple_salesforce 给出:没有名为 cryptography.hazmat.primitives.asymmetric.ed25519 的模块
- javascript - 如何从控件接收属性以对 CanJS 建模(定义模块)
- python - 使用带有 defaultdict 的附加时的 KeyError(Key)
- javascript - JavaScript 中的游戏问题,点击时警报来得太快
- android - 如何更改 AdMob 货币
- python - 将 Lightstreamer 与 IG Index API 一起使用