我在使用 CSS3 缩放和 Safari (v10.0.1) 时遇到问题。
我选择了具有以下结构的网格项:
<div class="grid-inline col-12 bp1-col-6 bp3-col-3 index-grid-selector index">
<a href="">
<div class="index-grid-item">
<div class="index-grid-dummy"></div>
<img srcset=", 2x" title="" alt="">
</div>
</a>
</div>
CSS(更少):
.index-grid-selector {
a {
.index-grid-item {
position: relative;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
.index-grid-dummy {
padding-bottom: 100%;
}
img {
position: absolute;
top: 0;
left: 0;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
}
}
&:hover {
.index-grid-item {
img {
transform: scale(1.2);
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
}
}
}
图像绝对定位在网格项容器内,然后在悬停时缩放。
在 Safari 中缩放图像时,图像会稍微放大并出现偏移。图像周围出现间隙(白线)。动画完成后,图像会正确放置,直到悬停功能被移除。
我在这里设置了一个工作演示来展示这个问题。
http://www.testdomainone.co.uk/test.html
我已尝试将以下内容应用于图像及其父级,但问题仍然存在。
-webkit-transform-style: preserve-3d;
-webkit-transform:translate3d(0,0,0);
-webkit-transform: translateZ(0)
有谁知道如何解决这个问题?
最佳答案
这并不能解决您使用 img
标签的具体问题,但由于您对图像使用固定大小,为什么不使用 background-image
更新为 image-set
为背景图像实现与 srcset
为 img
所做的等效......并且由于它或多或少只有 iOS Retina 使用高分辨率,这将是一个不错的选择浏览器不支持的回退
.index-grid-item {
position: relative;
overflow: hidden;
width: 200px;
height: 200px;
}
.index-grid-dummy {
padding-bottom: 100%;
background-size: 100%;
transition: transform 0.25s ease-in-out;
}
.index-grid-item:hover > div {
transform: scale(1.2);
transition: transform 0.25s ease-in-out;
}
<div class="index-grid-item">
<div class="index-grid-dummy" style="background-image: -webkit-image-set( url(http://www.testdomainone.co.uk/images/uploads/tours/39/jmc_5233-bigsur__thumb_large.jpg) 1x, url(http://www.testdomainone.co.uk/images/uploads/tours/39/jmc_5233-bigsur__thumb_large_2x.jpg) 2x );
background-image: url(http://www.testdomainone.co.uk/images/uploads/tours/39/jmc_5233-bigsur__thumb_large.jpg)"></div>
</div>
旁注,在上面的示例中,我使用内联样式在标记中设置图像源,就像使用 img
标记一样,当然这可以在 CSS 中设置还有
关于Safari 中的 CSS3 缩放闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41462628/