-webkit-backface-visibilityをかけると色がおかしくなる in Safari

Safariでチラツキを防止するために-webkit-backface-visibilityを指定したら色がおかしくなる

by FiNGAHOLiC

HTML

<div class="img img1"><img src="http://placekitten.com/400/400" width="400" height="400"></div>
<div class="img img2"><img src="http://placekitten.com/400/400" width="400" height="400"></div>

CSS

.img {
    width: 400px;
    height: 400px;
    -webkit-filter: grayscale(100%);
    -webkit-transition: -webkit-filter 1s linear 0;
}
.img:hover {
    -webkit-filter: grayscale(0);
}

.img2 {
    -webkit-backface-visibility: hidden;
}