11

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?

Maddiiiiis
  • 111
  • 1
  • 4

2 Answers2

19

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;}
Vishnu Sankaran
  • 669
  • 6
  • 20
  • 6
    Nice workaround. I got it working on iPhone 6 plus using a border-radius: 0.1px; so it has almost no visible impact. – Etienne Feb 03 '15 at 19:48
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.

Alex
  • 7,320
  • 1
  • 18
  • 31
Benjamin
  • 31
  • 1