＜2022/4/4 追記＞
現在であれば
image-rendering: -webkit-optimize-contrast;
というスタイルが使えるようです。
-webkit-backface-visibility: hidden; と比べて他のスタイルに影響されないため、こちらを使用するのが良さそうです。
■通常
■image-rendering: -webkit-optimize-contrast; あり
■image-rendering: -webkit-optimize-contrast; あり ＋ 角丸
下で書いている角丸をつけた場合でも問題なく効いています。
＜追記ここまで＞
これを Windows の Google chrome で表示するとかなりぼやけてしまうのですが、
その現象の回避方法としてimgに
-webkit-backface-visibility: hidden;
というスタイルを当てるものがあります。
が、自分のサイトの場合当ててみてもまったく変わらず・・
詳しく調べてみたところ、img に以下のスタイルを当てていると効かないようでした。
border-radius: ○px;
角丸ですね。
ちょっと不便ですが囲った div に当てるなどで対応できますので、
便利に使っていこうと思います。
もし他にも競合できないスタイルがあった場合は追記します！
■-webkit-backface-visibility: hidden; なし
■-webkit-backface-visibility: hidden; あり
コメントする