Box shadow spread bug in WebKit in iOS 7 on Retina iPads

Question

I've found what seems to be a bug in WebKit for iOS 7, but only on iPad 3 and 4, which leeds me to believe it's somehow hardware-related.

The bug: If I add the spread value (the fourth value) to CSS box shadows the whole shadow disappears. I've put up an exampel here.

Can anyone else confirm this error on iPad 3 and 4 with iOS 7?

It works in the simulator: http://i.imgur.com/SHPWdC2.png, but you are correct, it doesn't render on an iPad 3 running iOS7. — Rich Bradshaw, Sep 20 '13 at 13:50
I don't think it's the spread, as it is working on my iPad 3. However, certain box-shadows on my page will utterly disappear when zoomed in, with or without the spread value. This is, of course, unique to the new Safari. — MyNameIsKo, Sep 26 '13 at 21:22
I have the same issue on iphone5 and 5s when zoomed in or landscape mode for some custom code I have. It really depends on how much the zoom is that gets applied is. Using your example, when I switched to landscape, which zooms a little, I didn't lose the shadows, but as I zoomed in more I did lose the shadow. So it appears its how much it zooms in. — Dennis, Oct 03 '13 at 22:37

TugboatCaptain · Answer 1 · 2014-10-08T16:01:50.247

8

Still an issue in IOS 7.0.4.

Add a one pixel border radius to force the browser to render the shadow in landscape mode and while zooming.

border-radius: 1px;

edited Oct 08 '14 at 16:01

answered Jan 24 '14 at 03:01

TugboatCaptain

4,150
3
47
79

score 3 · Answer 2 · edited Sep 12 '18 at 17:43

3

We've found a good rule of thumb when dealing with safari and/or iPad issues (or both). Put the following rule on the element or class to force hardware rendering.

transform: translate3d(0,0,0);

This solved my problem getting a shadow (used as a border with the spread value) to render on an iPad the same as other devices.

edited Sep 12 '18 at 17:43

Leon

2,926
1
25
34

answered Sep 12 '18 at 17:20

Jon Nemeth

31
1

1

I had a similar problem on iPadOS 15 with text-shadow, and this fixed it. Thank you – Paul Schröder Dec 21 '21 at 12:28

score 2 · Answer 3 · answered Sep 30 '13 at 20:10

It is even more strange i was looking into the exact same problem.

If you use inset you can define your spread and then it is working fine!

an other fine fact is that your dropshadow will be gone as you turn your ipad into landscape mode.

This is a quite annoying bug!

score 2 · Answer 4 · edited Dec 29 '15 at 17:31

2

I had a similar issue on iPad mini w/ iOs 7.0.3 the problem appeared both in safari and in chrome

input field with inset box shadow didn't appear at all regardless the zoom
div drop shadow appeared, but when zoomed in changed to a line and further zoom in hide the line as well.

I found on another thread this solution:

"Try adding -webkit-appearance: none;, because iOS tends to mess up forms."

and it solved the problems !

edited Dec 29 '15 at 17:31

Ercksen

668
9
23

answered Nov 07 '13 at 17:44

Ilana Hakim

762
6
10

1

Yes, solves my problem with box-shadow on iOS too, as described here: http://stackoverflow.com/a/10757425 – Matty J Feb 05 '15 at 00:15

score 0 · Answer 5 · answered Nov 06 '13 at 14:46

Something similar here. Applied box-shadow to image elements. It shows fine at zoom=1. But if you zoom in, it disappears on iPad 3 with iOS 7.

CSS Code used:

#photostrip > img {
    -webkit-box-shadow: 0px 6px 8px rgba(0,0,0,0.33);
       -moz-box-shadow: 0px 6px 8px rgba(0,0,0,0.33);
            box-shadow: 0px 6px 8px rgba(0,0,0,0.33);
}

score 0 · Answer 6 · answered Apr 23 '14 at 03:43

Same issue with iPad Air / iOS 7 :(

Setting -webkit-appearance didn't help, neither did border-radius.

I used the following CSS to fix it (it lets you use the spread setting on other browsers, and overrides for webkit/iOS only):

.box_shadowed 
{
    box-shadow: 2px 2px 4px 2px #ccc;
    -webkit-box-shadow: 2px 2px 4px #ccc;
}

score 0 · Answer 7 · answered May 28 '14 at 06:15

I had the same issue on iPad 4 with iOS7. When I set CSS box shadow for an element it appears as intended on iPad portrait view. But when I rotate the iPad to landscape view the box shadow gets disappear.

I tried StrandedPirate's solution - adding 1px border radius to the element and it worked! This solution might not be applicable for all cases, but for my case it is adoptable.

score 0 · Answer 8 · edited Jun 11 '14 at 14:47

0

I had the same problem and added border-radius:1px to fix it.

edited Jun 11 '14 at 14:47

Bob Gilmore

12,608
13
46
53

answered Jun 11 '14 at 14:14

Yunfei

1

score 0 · Answer 9 · answered Feb 25 '19 at 08:45

I was using:

border-radius: 100%;
box-shadow: 0 0 0 20000px rgba(255,255,255, .6);

and the shadow wasn't appearing on iPad(iOS 11): Safari and Chrome.
I tried all the other answers but with no luck.

The solution for me was to reduce the spread from 20000px to 922px. This was the max value that I could use so the shadow would appear.

score 0 · Answer 10 · answered Mar 31 '21 at 14:30

0

One single rule didn't helped in my case. At the end I fixed adding ALL these rules:

-webkit-appearance: none;
border:0;
border-radius: 1px;
height: 1px;

In particular setting also the height.

answered Mar 31 '21 at 14:30

Diego D

1,706
19
23

Box shadow spread bug in WebKit in iOS 7 on Retina iPads

10 Answers10

Linked