2018年3月アーカイブ

<2022/4/4 追記>
現在であれば

image-rendering: -webkit-optimize-contrast;

というスタイルが使えるようです。
-webkit-backface-visibility: hidden; と比べて他のスタイルに影響されないため、こちらを使用するのが良さそうです。

■通常
120509_oshi_01.jpg

■image-rendering: -webkit-optimize-contrast; あり
120509_oshi_01.jpg

■image-rendering: -webkit-optimize-contrast; あり + 角丸
120509_oshi_01.jpg

下で書いている角丸をつけた場合でも問題なく効いています。

<追記ここまで>


高解像度ディスプレイへの対応で、大きめの画像を縮小して使うことがあると思います。
これを Windows の Google chrome で表示するとかなりぼやけてしまうのですが、
その現象の回避方法としてimgに

-webkit-backface-visibility: hidden;

というスタイルを当てるものがあります。

が、自分のサイトの場合当ててみてもまったく変わらず・・
詳しく調べてみたところ、img に以下のスタイルを当てていると効かないようでした

border-radius: ○px;

角丸ですね。
ちょっと不便ですが囲った div に当てるなどで対応できますので、
便利に使っていこうと思います。

もし他にも競合できないスタイルがあった場合は追記します!


■-webkit-backface-visibility: hidden; なし
120509_oshi_01.jpg

■-webkit-backface-visibility: hidden; あり
120509_oshi_01.jpg



このアーカイブについて

このページには、2018年3月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2017年5月です。

次のアーカイブは2018年8月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。