サウウェブ

B'z、映画、海外ドラマ、スケボーネタバレニュースまとめ

WEB

CSS Transformsで画像がぼやける、ちらつく時の対処法

PC,ブログ、パソコン、キーボード

CSSのTransformsを使ったときに画像がぼやけるときありませんか?マウスオーバーで画像が拡大表示されるやつとか!ぼやけたり、ちらつく時にコードをたすだけで画像が綺麗に表示されます。そもそもこういうコード書かずに綺麗に表示されたらいいんですけど

スポンサーリンク

追記するCSSのコード

img {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

 

2021年度版の追記するCSSのコード

上記よりもスマートな書き方がありましたので、追記します。

img {
    image-rendering: -webkit-optimize-contrast;
}

 

デモ作りました

backface-visibilityの指定があるとき

  • 写真、カラフル
  • 写真、カラフル
  • 写真、カラフル
  • 写真、カラフル

 

おまけ

”image-rendering”のコード

  -ms-interpolation-mode: nearest-neighbor;   /* IE8+ */
  image-rendering: -webkit-optimize-contrast; /* Safari (WebKit) */
  image-rendering: -moz-crisp-edges;          /* Firefox (Gecko) */
  image-rendering: -o-crisp-edges;            /* Opera 12.x */
  image-rendering: pixelated;                 /* Chrome 41+, Opera 29+ (CSS4) */

 

-WEB

Optimized with PageSpeed Ninja