CSS Drop-shadow

[PCHomepage]

This bit of CSS, which is part of styles for an ID, creates a reddish horizontal line with a drop-shadow that is working fine in most browsers. However, in Safari on iDevices such as iPad, the shadow seems to extend to the bottom of the page making the whole thing look gray. What did I miss?

-webkit-box-shadow: 0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);
-moz-box-shadow: 0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);
box-shadow: 0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);

-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;

 

[spamjim]

When all looks good everywhere but an iDevice, this smells like a viewport issue...

http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972

 

[PCHomepage]

Thank you! It brought back the red line although the page below is still "grayed-out" looking for some reason. I can see the drop-shadow now and it appears to end where it should so I guess the current issue is elsewhere.