iOS8 doesn't render CSS box shadows correctly

Question

Level 1

55 points

iOS8 doesn't render CSS box shadows correctly

According to an article at "caniuse", iOS7.1, 8, and 8.1 are supposed to support the CSS3 property box-shadow. However, I have an html file to which I could direct you which shows that this is not the case. The file I have is simple-minded, containing CSS only for the box-shadow in question. When presented in iOS8 Safari, no box-shadow is rendered. When presented in MacOS Safari, Firefox, Chrome, or Opera, the box-shadow is rendered correctly. Is this (and are other) iOS8 CSS3 limitations documented?

iPad mini 2 Wi-Fi, Cellular, iOS 8

Posted on Nov 3, 2014 7:03 AM

Reply

Answer 1

Nov 3, 2014 7:12 AM in response to F J Poblam

How exactly are you applying the box shadow?

Because. this works for me on iOS 8.1 on an iPhone:

box-shadow:4px 4px 3px rgba(40,40,40,0.3);

Reply

Answer 2

F J Poblam Author

Level 1

55 points

Nov 3, 2014 7:24 AM in response to Phil0124

Check apfwebs[dot]com[slash]demo[dot]htm — No box shadow in that file is rendered on my iPad mini, while it is on the listed MBP browsers.

Reply

Answer 3

Nov 3, 2014 8:06 AM in response to F J Poblam

Looks fine for me:

Make sure the CSS is getting correctly loaded. Try clearing Cache by going into Settings->Safari->Clear History and Website Data.

Reply

Answer 4

F J Poblam Author

Level 1

55 points

Nov 3, 2014 8:24 AM in response to Phil0124

Done and done. How do you get a screen shot of an iPad Mini 2 running iOS8.1 (12B410)?

Reply

Answer 5

F J Poblam Author

Level 1

55 points

Nov 3, 2014 8:50 AM in response to F J Poblam

AH, found screen capture procedure. Now, if I can figure out how to get this booger attached, it'll be with this response...nope can't do it. Is it via link to a file uploaded and linked?

Reply

Answer 6

Nov 3, 2014 8:53 AM in response to F J Poblam

Its an iPhone 5 running iOS 8.1. To attach a pic, there should be small camera icon at the top of the reply box. Use that to attach the image, or just post a link to it.

Reply

Answer 7

F J Poblam Author

Level 1

55 points

Nov 3, 2014 9:00 AM in response to Phil0124

Reply

Answer 8

F J Poblam Author

Level 1

55 points

Nov 3, 2014 9:08 AM in response to F J Poblam

N.b., the result is the same no matter how I bump the figures for the box shadow. I tried the ridiculous 50px 50px 50px and got the same result.

Reply

Answer 9

Nov 3, 2014 9:13 AM in response to F J Poblam

What happens if you rotate the iPad to Portrait view?

Seems to me its more of a rendering glitch in Landscape view, than anything else. Because looking at your picture, I can make out the shadow on the right side, but its almost as if its covered by something on the bottom.

I can also recreate the issue here by rotating the iPhone to landscape view. Then the shadows are not displayed. Again almost like they are being covered up by something.

It may be best to submit a bug report at http://www.apple.com/feedback/ipad.html

Select Bug Report as the feedback type there.

Reply

Answer 10

F J Poblam Author

Level 1

55 points

Nov 3, 2014 9:26 AM in response to Phil0124

You're right. In portrait it seems to render correctly. However, it is my impression (mistaken?) that the majority of iPad users go for landscape. Even lots of cases (including Apple's) favor propping up the iPad in landscape mode for habitual work. I certainly do so. The iPad is my main squeeze these days. I use it even for website development and maintenance! And graphics. I'll file that bug. Thanks for your kind and patient attention. And thanks for the link.

Reply

Answer 11

etresoft

Level 8

46,046 points

Nov 3, 2014 10:12 AM in response to F J Poblam

It looks fine on my iPad mini.

Reply

Answer 12

muse6

Level 1

0 points

Dec 4, 2014 8:24 AM in response to F J Poblam

I'm having a similar problem on iPhone 6 Plus.

Decided to dig into it and discovered that multiple box shadows does not seem to be supported. Explicitly:

box-shadow: 0 -12px 0 0 #000000; ==> makes one shadow

box-shadow: 0 12px 0 0 #000000; ==> makes one shadow

box-shadow: 0 -12px 0 0 #000000, 0 12px 0 0 #000000; ==> makes no shadows

Reply

Answer 13

Dec 4, 2014 9:34 AM in response to muse6

It works for me, but its a little flaky when zooming in. It disappears after a certain zoom level is reached.

Reply

Answer 14

muse6

Level 1

0 points

Dec 5, 2014 4:41 AM in response to Phil0124

I tried a separate test like you with only these shadow styles. I can confirm that the zooming is flaky, you can watch the lines flicker in and out while pinching, and depending when you stop they may be visible or not in the end.

I retried testing the single shadow styles with this method. I assumed this was a problem with multiple shadows on one element, like I originally posted, but nope! The single shadows are also flaky and can be made invisible with zooming.

Reply

Answer 15

muse6

Level 1

0 points

Dec 5, 2014 6:36 AM in response to muse6

I can reproduce this when zooming on the iPhone 6 now too.

Reply