Box-shadow not shown on Safari Mobile on iOS 7 (in landscape)

Question

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:

And a jsfiddle.

How can I solve this problem?

Solution 1

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 .

Solution 2

Try the following CSS property:

-webkit-appearance: none;

Solution 3

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

background-clip: padding-box;

Comments

[franzlorenzon]

I already tried that, it didn't work. What version of Safari do you have?

[Admin]

Worked in portrait and I missed your note about that.

[joshperry]

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!

[Walid Ammar]

What the heck! ..... it's not 'logically' related to box-shadow, fortunately it solved my issue ....

[Master of Ducks]

Excellent! Solved an issue of subtle box-shadow not appearing on iPad on iOS 11.

[IanVS]

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 stackoverflow.com/a/26687797/1435658 which explains it.