@Satoh_D no blog

大分にUターンしたので記念に。調べたこととか作ったこととか食べたこととか

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>

CSS

.mod-pagetop {
  bottom: 0;
  position: fixed;
  right: 0;
}

解決方法

解決方法ですが、単純にテキストを入れるだけです。
入れるテキストは"."でも"&nbsp;"でも構いません(半角スペースは駄目みたいです)。
この解決方法を元に、先ほどのソースを修正してみました。

CSS

.mod-pagetop a:before {
  content: ".";
  color: transparent;
}

これでAndroidでもクッキリと表示されます。
スマホサイトのコーディングをする際は覚えておくと損はないかと思います。

参考サイト