Box-shadow не отображается на Safari Mobile на iOS 7 (в ландшафте)

у меня очень простой box-shadow в заголовке:

h1 {
    box-shadow: 0 4px 9px -8px #000000;
    color: #D95B43;
    height: 1.2em;
    margin-top: 0;
    font-size: 1.3em;
    padding: 10px;
}

но box-shadow не работает на мобильном Safari (iOS 7). В предыдущей версии (и в портрет вид, в iOS7) он работает нормально.

вот скриншот:

enter image description here

и jsfiddle.

Как я могу решить эту проблему?

9
css ios7 ipad mobile-safari

4 ответов

добавлять border-radius: 1px Исправлена ошибка:

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;
}

From:https://stackoverflow.com/a/21323644/1565597 .

19

попробуйте следующее свойство CSS:

-webkit-appearance: none;
13

Я пробовал читать Bootstrap код.
Возможно, установить следующий код решит его.

background-clip: padding-box;
0

попробуйте префикс box-shadow с правильным префиксом поставщика. В этом случае:

-webkit-box-shadow: 0 4px 9px -8px #000000;

работает для меня в вашем jsfiddle.

Примечание: Если вы хотите, чтобы ваш css3 был отказоустойчивым в других браузерах, обратитесь сюда:https://www.w3.org/TR/CSS2/syndata.html#vendor-keyword-history для списка префиксов. Наиболее важными являются -o-, -moz-, -ms- и -webkit-

-1