CSS3 Scale Flicker in Safari - css

Question

I am experiencing an issue with CSS3 scaling and Safari (v10.0.1).
I have a selection of grid items with the following structure:
<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;
}
}
}
}
The image is positioned absolutely within the grid item container and then scaled on hover.
During the image scaling in Safari, the image enlarges slightly and appears to shift. Gaps (white lines) appear around the image. Once the animation is complete, the image sits correctly, until the hover function is removed.
I have set up a working demo here to showcase the issue.
http://www.testdomainone.co.uk/test.html
I have tried applying the folowing to the image and its parent, but the issue still occurs.
-webkit-transform-style: preserve-3d;
-webkit-transform:translate3d(0,0,0);
-webkit-transform: translateZ(0)
Does anyone know how this can be fixed?

Answer 1

This does not solve your specific issue using an img tag, though since you use fixed size for your images, why not use background-image
Updated with image-set to achieve the equivalent for background images as srcset does for img ... and since it is more or less only iOS Retina which use that high resolution, it will be a decent fallback for browser not supporting it
.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>
Side note, in above sample I use inline style to set the image source in the markup, as one does with the img tag, and of course this could be set in the CSS as well