iPhone6 Plusでcssのbox-shadowが効かない時の対処方法

Web・ブログのこと CSS
Array ( [0] => Array ( [parent] => 0 [slug] => web-tips [name] => Web・ブログのこと ) [1] => Array ( [parent] => 701 [slug] => css [name] => CSS ) )
スポンサーリンク

box-shadow

謎だ。カズヤ(@kazumiso_s)です。

cssをいじっている時に気付いてしまった・・・。

iPhone6 Plusでbox-shadowが効かない!

PCはもちろん、画面の小さいiPhone6では有効になるのに、なぜかiPhone6 Plusだけ見えない。

原因は不明ですが・・・そんな時の対処方法をご紹介!

スポンサーリンク

iPhone6 Plusでbox-shadowが効かない

まずは事象確認。

以下のcssにborderとbox-shadowを指定したdivタグを表示します。
PCやiPhone6 Plus以外のスマホでアクセスして頂いてる方には、赤い影がdivタグを囲っている様子が表示されていると思います。

ですが、こちらはiPhone6 Plusでアクセスすると赤い影が出ずに枠線だけが表示されてしまいます。

なんとも不可解な事象・・・。

iPhone6 Plusではbox-shadowが効かないパターン
.box-shadow1 {
border: 1px solid;
box-shadow: 1px 1px 5px #ff0000;
}

iPhone6 Plusでbox-shadowが効かない時の対処方法

この事象は以下の2つの方法で解決することできます!

それぞれ試してみます。

  • 1:border-radiusを指定する
  • 2:background-colorを指定する

border-radiusを指定して対処!

こちらは線に丸みを付ける、border-raidusを指定したもの。

これでiPhone6 Plusでもbox-shadowが有効となり、赤い影が表示されています。

サンプルでは1pxを指定していますが、0.1px以上指定していれば問題なさそうです。

iPhone6 Plusでbox-shadowが効くようにborder-radiusを指定
.box-shadow2 {
border: 1px solid;
box-shadow: 1px 1px 5px #ff0000;
border-radius:1px;
}

background-colorを指定して対処!

こちらは背景色を指定する、background-colorを指定したもの。

こちらでもbox-shadowが有効となり、赤い影が表示されています。

背景と同色の値を設定すれば見た目にも影響なく対応できます。

iPhone6 Plusでbox-shadowが効くようにbackground-colorを指定
.box-shadow3 {
border: 1px solid;
box-shadow: 1px 1px 5px #ff0000;
background-color:#fff;
}

最後に

見つけた時は諦めかけていましたが、知り合いに相談してみた所、ご紹介した解決策を知っていたので非常に助かりました。

border-radiusとbackground-color以外にも指定すればbox-shadowが有効になるものがあると思いますが、非常に簡単な対応で解決できたのでとりあえずこれで良しとしましたw

ただし、ブラウザでユーザーエージェントをiPhone6 Plusと同じものに変更しても実機でなければ事象は確認できませんでした。
今後のiOSアップデートで改善されるのかどうか分かりませんが、iPhone6 Plusを持っていないと確認できない事象になるためちょっと困った問題。

ご自身のサイトやブログなどでbox-shadowを使っている場合はご注意を。

  • 確認日:2015/02/08
  • 機種:iPhone6 Plus
  • iOS:8.1.3
スポンサーリンク

この記事は私が書きました。

管理人:カズヤ(@kazumiso_s)

31歳、横浜市在住の2児の父。本業はシステムエンジニアで目標は今の会社で取締役になること。「毎日に価値を見出す」ことを信念に置き、未来に役立つ情報を発信しています。難病「好酸球性副鼻腔炎」という嗅覚障害持ち。最近生まれて初めて坊主にした。詳細なプロフィールはこちらから

この記事をシェアはこちらから。

フォローして頂けるとブログの更新情報をお届けできます。

この記事が気に入ったら「いいね!」
最新情報をお届けします。

もう1記事いかがですか。