Question

我遇到了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（LESS）：

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

有谁知道如何解决这个问题？

Answer 1

虽然您使用img标记，但这并不能解决您的具体问题，但为什么不使用background-image

使用image-set进行了更新，以获得与srcset img相同的背景图片...并且因为它或多或少仅使用了那么高的iOS Retina对于不支持它的浏览器来说，这将是一个不错的后备

＆＃13;

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

＆＃13;

<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>

＆＃13;

旁注，在上面的示例中，我使用内联样式在标记中设置图像源，就像使用img标记一样，当然也可以在CSS中设置< / em>的

Safari中的CSS3 Scale Flicker

1 个答案: