iPhone6+でbox-shadowがかからないバグ

公開: 2015-02-11 11:45
更新: 2016-04-29 06:02

どうもこんにちは。あっきぃです。

今日が休日だと先ほど気づきました。

休日でも平日でもやることは変わらないんですが、なんとなく休日の方が外が静かなので好きです。



さて、このブログでも使っているCSSのbox-shadow。
iPhone6+を購入してしばらく経つのに、一部にbox-shadowがかかっていないことに先ほど気づきました。



例としてこんなブロック要素を用意

.box {
        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;
}

よいしょ。

これでiPhone6+でも見れるようになりました。

(※rgba()だと入れても効果なし。あっきぃはこのパターン。)




解決方法2 border-radiusをつける

.box {
        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のアップデートで直せるのかしら。




この記事をシェア
この記事にコメントする
書き込む
あっきぃ(@appstars_aki)
Web、iOSなフリーランサーです。好きなものはお寿司です。でもお寿司は高いので普段は雑草とか拾ったドングリを食べています。お仕事や意味もなく毎月お小遣いをくれる人を探してます。

お仕事の依頼や自分で作ったアプリのレビューを希望しちゃう方はaki@appstars.jpまでご連絡ください。