どうもこんにちは。あっきぃです。
今日が休日だと先ほど気づきました。
休日でも平日でもやることは変わらないんですが、なんとなく休日の方が外が静かなので好きです。
さて、このブログでも使っている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のアップデートで直せるのかしら。
