Android 4.* で 画像がぼやける不具合について

最近はコーヒーを飲む回数より多くAndroid爆発しろと言ってる気がします。

Android4.xで画像という画像がぼやけまくるという怪現象があり、
シンプルな例を書いてみたらtranslateZが1つの原因のようでした。

translateZが親に指定されているだけでbackgroundだろうがborderだろうが画像が全部ぼやける。
空要素にbackground-image指定している場合は、要素に 入れておけばとりあえずはくっきりさせることは出来る。
imgはaltを入れてもtitleを入れても効果がない。

iScroll4を使うときは注意した方がいいです。
スクロールをスムーズにするためとかでtranslateZ使ってるから
スクロール要素内に入れた画像が全部ぼやけてしまう可能性があります。

ほかにもtranslateZ使うケースは結構あると思うんですけど、
もしAndroid4.x端末だけなんか画像がぼやけてるなーと思ったらtranslateZのせいということになるんじゃないかと思います。
ただtranslateZがかかってないところでもぼやけることがあったし、translateZやtranslate3dをつかっててもぼやけないこともあるので、ほかに起因がありそうです。
いい対策があればぜひおしえてください…

あー爆発すればいいのにAndroid。

もう一つ原因になりそうなもの
-webkit-backface-visibility:hidden を使うときは注意が必要です。

Leave a Comment.