CODEWITHSUNDEEP
cssipadios7mobile-safari
franzlorenzon
franzlorenzon

Reputation: 5943

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

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?

Upvotes: 11

Views: 15833

Answers (4)

mrlisik
mrlisik

Reputation: 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-

Upvotes: -1

KABA
KABA

Reputation: 352

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

background-clip: padding-box;

Upvotes: 5

Harish Jain
Harish Jain

Reputation: 291

Try the following CSS property:

-webkit-appearance: none;

Upvotes: 29

franzlorenzon
franzlorenzon

Reputation: 5943

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 .

Upvotes: 22

Related Questions