Safari 中的 CSS3 缩放闪烁

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（少）：

.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 使用该高分辨率，因此它将是一个浏览器不支持的不错的后备

.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 中设置