iPhone iOS nie będą wyświetlane box-shadow prawidłowo

Question

Design

Formularz kontaktowy na elastyczne projektowanie ma pól wejściowych z zarówno z cienia wstawka i regularne cieniem na zewnątrz. Zobacz zdjęcie poniżej.

---

Kod

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

---

Zagadnienie

iOS V4 + nie wykazuje skrzynkowej cień prawidłowo. Zobacz zdjęcie poniżej.

---

Testowane

I próby stosując -webkit-Box-cień.

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

Zastosowałem display:block; do elementu wejściowego.

---

Aktualny Obejście

wolałbym nie trzeba to zrobić, ale jest to jedyny sposób mogę otrzymać pożądany efekt.

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

nawet z tego obejścia, cień wstawka na iOS nie jest wyświetlany poprawnie; ale jest wystarczająco blisko.

---

Moje pytanie

Czy można mieć wiele wystąpień box-shadow na pojedynczym elemencie renderowanie prawidłowo na urządzeniach z iOS? Jeśli nie, to co z cieniem wstawionym? Czy używam tej właściwości i jej wartości niepoprawnie?

Z góry dziękuję!

Answer 1

Spróbuj dodać -webkit-appearance: none; iOS ma tendencję do bałagania formularzy.