Вопрос по css3, ios – iPhone iOS не будет правильно отображать тени

47
The Design

Контактная форма в адаптивном дизайне имеет поля ввода как со встроенной тенью, так и с обычной внешней тенью. Смотрите изображение ниже.

Input Field Design on Mobile

The Code
input {
    background:#fff;
    height:auto;
    padding:8px 8px 7px;
    width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border:#fff solid 3px;
    border-radius:4px;
    box-shadow:0px 0px 5px rgba(0, 0, 0, .25), inset 2px 2px 3px rgba(0, 0, 0, .2);
}
The Issue

iOS v4 + не отображает тень блока должным образом. Смотрите изображение ниже.

Input box-shadow rendered incorrectly

Tested

Я пытался использовать -webkit-box-shadow.

-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .25),
                   inset 2px 2px 3px rgba(0, 0, 0, .2);

Я применилdisplay:block; к элементу ввода.

Current Workaround

Я бы предпочел не делать этого, но это единственный способ получить желаемый эффект.

HTML

<p><input /></p>

CSS

p {
   width:50%;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   box-shadow:0px 0px 5px rgba(0, 0, 0, .35);
   border-radius:4px;
}

    input {
        background:#fff;
        height:auto;
        padding:8px 8px 7px;
        width:100%;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        border:#fff solid 3px;
        border-radius:4px;
        box-shadow:inset 2px 2px 3px rgba(0, 0, 0, .2);
    }

Даже с этим обходным путем тень на iOS не отображается должным образом; но это достаточно близко.

My Question

Можно ли иметь несколько экземпляров box-shadow на одном элементе рендеринга должным образом на устройствах iOS? Если нет, то как насчет тени? Или я неправильно использую это свойство и его значения?

Thanks in advance!

Может стоит отметить, что я тестировал безbox-shadow и это выглядело так же. Tom Pietrosanti
Ух, интересная проблема и мы отформатировали вопрос. Я не знаю ответа, но теперь мне любопытно - я буду следить. RLH

Ваш Ответ

1   ответ
146

-webkit-appearance: none; iOS имеет тенденцию портить формы.

Это все еще актуально сегодня. +1
Это было ок. 3 года, ноiOS tends to mess up forms .. Я должен проголосовать за это: & apos ;-) Примечание: для тени box iOS потребуется 3 вещи. 1) Vendor Prefix на коробке-тени-webkit-box-shadow: ... 2) Радиус границы установлен, например, 1pxborder-radius: 1px 3) отключен внешний вид-webkit-appearance: none;
Интересно, что я пошел вперед и дал парням ответ, хотя и возразил. rebz
Это исправило это! Вы, сэр, выпейте один напиток на меня. rebz
и не забудьте поставить его перед box-shadow, а не после

Похожие вопросы