11

I have a very simple box-shadow on an header:

h1 {
    box-shadow: 0 4px 9px -8px #000000;
    color: #D95B43;
    height: 1.2em;
    margin-top: 0;
    font-size: 1.3em;
    padding: 10px;
}

But the box-shadow doesn't work on Mobile Safari (iOS 7). In the previous version (and in portrait view, in iOS7) it works fine.

Here's a screenshot:

enter image description here

And a jsfiddle.

How can I solve this problem?

franzlorenzon
  • 5,845
  • 6
  • 36
  • 58

4 Answers4

28

Try the following CSS property:

-webkit-appearance: none;
MC Emperor
  • 22,334
  • 15
  • 80
  • 130
Harish Jain
  • 281
  • 3
  • 2
  • Excellent! Solved an issue of subtle box-shadow not appearing on iPad on iOS 11. – Master of Ducks Apr 17 '18 at 21:43
  • Why does this work? I was having problems using a box-shadow in place of a border in safari mobile, but adding this line fixed it. Edit: I found https://stackoverflow.com/a/26687797/1435658 which explains it. – IanVS Mar 01 '22 at 19:28
22

Adding border-radius: 1px fixed the problem:

h1 {
    box-shadow: 0 4px 9px -8px #000000;
    border-radius: 1px;
    color: #D95B43;
    height: 1.2em;
    margin-top: 0;
    font-size: 1.3em;
    padding: 10px;
}

From: https://stackoverflow.com/a/21323644/1565597 .

Community
  • 1
  • 1
franzlorenzon
  • 5,845
  • 6
  • 36
  • 58
  • 1
    I have a box shadow on a full-width div that was sporadically showing on phone iOS, though it seemed fine on the iPad. This 1px radius fixed the issue for me as well. Thank you! – joshperry Apr 09 '15 at 15:34
  • What the heck! ..... it's not 'logically' related to box-shadow, fortunately it solved my issue .... – Walid Ammar Aug 30 '15 at 06:25
5

I tried reading the Bootstrap code.
Maybe set the following code will solve it.

background-clip: padding-box;
KABA
  • 313
  • 3
  • 8
-1

Try prefixing the box-shadow with the right vendor prefix. In this case:

-webkit-box-shadow: 0 4px 9px -8px #000000;

Works for me in your jsfiddle.

Note: If you want your css3 to be fail-proof on other browsers, refer here: https://www.w3.org/TR/CSS2/syndata.html#vendor-keyword-history for a list of prefixes. Most important are -o-, -moz-, -ms-, and -webkit-

Tetsuya Yamamoto
  • 24,297
  • 8
  • 39
  • 61
mrlisik
  • 1