ios 8 box shadow on iPhone 6 Plus

Question

I have a display problem with the box shadow property specifically on the iPhone 6 plus. If I add the meta tag width=device-width, the following box shadow isn't displayed at all:

-webkit-box-shadow: 1px 1px 5px 5px #a8a8a8; box-shadow: 1px 1px 5px 5px #a8a8a8;

If I don't use the meta tag, box shadows "magically" disappear if you zoom into the page. You can comprehend this here:

http://jsfiddle.net/b6aaq57z/3/

This seems to be a specific iPhone 6 plus bug. On older iPhone Versions running the same iOS Version (8.0.2), the box shadows are working properly.

Is there anyone with a solution?

Answer 1

You can add border-radius:1px to the div. It fixes the box-shadow issue in iphone 6+ and other retina devices

.box-shadow{
 -webkit-box-shadow: 1px 1px 0.25em 0.25em #a8a8a8;
 box-shadow: 1px 1px 0.25em 0.25em #a8a8a8;
 border-radius:1px;}    

Answer 2

Try using -webkit-apperance: none;

You can add this to your global reset to eliminate all issues with this. I use:

*, *:before, *:after {
    -webkit-appearance: none;
}

I also have my box-sizing reset in there as well.