サイト上に画像を表示する時、画像を拡大表示していたり、画像のサイズに小数点が発生していたりするとpngがぼやけることがありますが、そういった状態でなかったとしても、画像にtransformプロパティが当たっていてもぼやける場合があります。
こうした場合には、backface-visibilityと-webkit-backface-visibilityをhiddenに設定すると画像のぼやけを回避できます。
プレビュー
上記のブロックでは、position: absolute; left: 50%; top: 50%; transform: translate( -50%, -50% );を利用して画像をブロック内の上下左右中央寄せにしています。 backface-visibilityと-webkit-backface-visibilityをhiddenに設定し、Google Chromeでのぼやけを回避しています。
html例
<div class="box">
<img src="./img.jpg">
</div>
css例
.box{
height: 700px;
background: #eee;
position: relative;
overflow: hidden;
}
.box figure{
width: 70%;
height: auto;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box img{
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
まとめ
ブロックの中央寄せを行う際など、transformを利用しがちですが、画像のぼやけという副作用が発生することがあるので、本プロパティは忘れずに適用しておきたいです。
もっとも、Google Chromeのみに発生するものではあるので、ブラウザ側での対応も期待したいと思います。
参考リンク
ふたえご｜CSS3 transition, transformを使用時に画像がぼやける
https://www.futaego.com/2017/css3-transition-transform-%E7%94%BB%E5%83%8F%E3%81%8C%E3%81%BC%E3%82%84%E3%81%91%E3%82%8B/
PRAWN COCKTAIL｜【CSS】transformを画像に当てているとぼやけてしまう時の対処法
https://prawn-cocktail.com/blog/358/
