Ios 8 box shadow на iPhone 6 Plus

У меня проблема с отображением свойства тэга box, особенно на iPhone 6 plus. Если я добавлю метатег width=device-width, тень в кавычках не отображается вообще:

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

Если я не использую метатег, тени теней "волшебным образом" исчезают, если вы увеличиваете масштаб страницы. Вы можете понять это здесь:

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

Кажется, это конкретный iPhone 6 плюс ошибка. В более старых версиях iPhone, работающих с той же версией iOS (8.0.2), тени теней работают правильно.

Есть ли кто-нибудь с решением?

Ответ 1

Вы можете добавить border-radius: 1px в div. Он исправляет проблему с коробкой в iphone 6+ и других устройствах сетчатки.

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

Ответ 2

Попробуйте использовать -webkit-apperance: none;

Вы можете добавить это в свой глобальный reset, чтобы устранить все проблемы с этим. Я использую:

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

У меня также есть мой размер окна reset.