Androidでposition: fixed;を使用した時に画像がぼやけてしまう
Android(4.x)端末で position: fixed; した画像がぼやけてしまいます。
百聞は一件に如かずということで、次の画像を御覧ください。
枠線で囲んでいる部分は position: fixed; にした要素です。
比べてみると画像がぼやけて見えるのがわかるかと思います。
原因
この現象の原因は要素の中身が画像しか無い(テキストが無い?)ことにあるみたいです。
実際にこの部分は次のようにコーディングをしていました。
HTML
<div class="mod-pagetop"> <a href="#page"><img src="btn_pagetop.png" width="38" height="38" alt="PAGE TOP"></a> </div>
.mod-pagetop { bottom: 0; position: fixed; right: 0; }
解決方法
解決方法ですが、単純にテキストを入れるだけです。
入れるテキストは"."でも" "でも構いません(半角スペースは駄目みたいです)。
この解決方法を元に、先ほどのソースを修正してみました。
.mod-pagetop a:before { content: "."; color: transparent; }
これでAndroidでもクッキリと表示されます。
スマホサイトのコーディングをする際は覚えておくと損はないかと思います。