Apple Event: May 7th at 7 am PT

Looks like no one’s replied in a while. To start the conversation again, simply ask a new 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

19 replies

Apr 17, 2015 9:48 AM in response to F J Poblam

Same problem here. The box shadows of the highlighted menu items and the page headers only show up in portrait view, not in landscape. Upgrading to iOS 8.2 did not cure. Poor show, Apple.

Apr 19, 2015 6:36 AM in response to FrankieGTH

Problem looks to have been solved in iOS 8.3.

Apr 20, 2015 3:23 PM in response to FrankieGTH

I spoke too early. It appeared that it was this additional script in the head that solved the problem:

if ((navigator.platform.indexOf('iPad') >= 0) || (navigator.platform.indexOf('iPhone') >= 0))

document.write('<meta name="viewport" content="initial-scale=1">')

</script>

I had added that to solve a zoom problem on the iPad. Which it didn't, but it did cure the box-shadow problem. Without it, the problem remains in iOS 8.3. I am trying to make a bare-bones demo, but have not been able yet that reproduces the problem. Unfortunately, the bare-bones demo that the OP linked to is no longer available (broken link). If he reads this, could he post the source code?

nerdgore

Level 1

0 points

Jun 23, 2015 5:22 AM in response to FrankieGTH

We've encountered this issue too today. It seems that somehow this is related to the spread value. If your spread is larger than zero, Safari on iOS expects border-radius to be larger than zero too.

In our case this solves the issue:

selector { border-radoius: 0.1px; /* actually rounds down to 0 for the rendering */ box-shadow: 0 0 4px 3px rgba(0,0,0,0.15); }

iOS8 doesn't render CSS box shadows correctly