どうもこんにちは。あっきぃです。
今日が休日だと先ほど気づきました。
休日でも平日でもやることは変わらないんですが、なんとなく休日の方が外が静かなので好きです。
さて、このブログでも使っているCSSのbox-shadow。
iPhone6+を購入してしばらく経つのに、一部にbox-shadowがかかっていないことに先ほど気づきました。
例としてこんなブロック要素を用意
.box {
width: 240px;
height: 200px;
box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
}
width: 240px;
height: 200px;
box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
}
どうでしょう。見えますか?
MacBook(Chrome)、iPhone5s(iOS8.1.3)、iPodTouch5th(iOS7.1.2)、iPadAir2(iOS8.1.3)で見えます。
が、iPhone6+(iOS8.1.3)だけ見えません。
(iPhone6は持ってないけど大丈夫らしい)
解決方法1 背景色をつける
.box {
width: 240px;
height: 200px;
box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
background: #fff;
}
width: 240px;
height: 200px;
box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
background: #fff;
}
よいしょ。
これでiPhone6+でも見れるようになりました。
(※rgba()だと入れても効果なし。あっきぃはこのパターン。)
解決方法2 border-radiusをつける
.box {
width: 240px;
height: 200px;
box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
border-radius: 1px;
}
width: 240px;
height: 200px;
box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
border-radius: 1px;
}
これだと透過がキープされますね。
1pxの角丸もわからないっちゃわからない気がする。
おまけ(やってみたけどダメだった)
(ダメ)1px*1pxの透過pngを背景画像として読み込ませてみる。
(ダメ)1px*1pxの真っ白pngを背景画像として読み込ませてみる。
うーむ。
機種依存のバグなんてAndroidみたい。
OSのアップデートで直せるのかしら。