2

I'm encountering a strange bug when drawing a box shadow when the page is viewed on the iPad. In portrait orientation, the shadow renders as it should, but when the device changes orientation or the page is accessed in landscape mode the shadow disappears. This does not occur on the iPhone or desktop browsers.

I'm using a basic box-shadow like: box-shadow: 0px 23px 26px -13px rgba(0,0,0,0.71);

Is there some specific reason this doesn't draw only on the iPad in a specific orientation?

I've made a simple jsFiddle here: http://jsfiddle.net/3sPjw/

Will Klingelsmith
  • 153
  • 1
  • 4
  • 1
    Probably because you don't have mobile meta tags in your html. It works fine for me: http://jsbin.com/agAfOtA/1/edit. Need to add: – Christina Dec 15 '13 at 21:36

2 Answers2

4

This is a confirmed bug. I'm using an iPad air with IOS 7.0.4 and it exhibits this behavior. Even in portrait mode the shadow will disappear if you zoom in by any amount.

The fix is to set a border radius on the element you are adding the shadow to. Adding a one pixel border radius is sufficient to get around this defect.

TugboatCaptain
  • 4,150
  • 3
  • 47
  • 79
0

Kind of a weird solution but it worked (tested in IPAD),thanks to Box-shadow not shown on Safari Mobile on iOS 7 (in landscape) 

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;
}
Community
  • 1
  • 1
sg28
  • 1,363
  • 9
  • 19