chrome で縮小した画像がホバー時にぼやけるときの対処法

ウェブサイトに画像を img タグでおいた時に、画像のサイズが原寸サイズより小さい場合、ぼやけてしまう現象があります。transition アニメーションなどしていると、違和感がより強く見えます。

主に chrome で発生する現象のようですが、その対処法を紹介します。

対処法

例えば、200*203 のような奇数サイズの画像を縮小して表示すると、画像がぼやける可能性があります。

可能であれば、200*202 のような偶数サイズに変更します。
すると、縮小時もぼやけなくなります。

.image {
    backface-visibility:hidden;
}

MDNの backface-visibility によると要素は三次元的に捉えられており、このプロパティは裏側を表示するか否かの設定をできるようです。

hidden に変更することにより余計な描写が減ることで、ぼやける現象が起きなくなるとのこと。

これだけではうまく行かない場合、z軸を明示する方法もあるようです。

.image {
    backface-visibility:hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
}