iPhone iOS no mostrará box-shadow adecuadamente

Question

El diseño

El formulario de contacto en un diseño de respuesta tiene campos de entrada tanto con una sombra de inserción y la sombra fuera regular. Ver la imagen a continuación.

---

El Código

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

---

El problema

iOS v4 + no muestra el cuadro de sombras correctamente. Ver la imagen a continuación.

---

Probado

He intentado usar webkit-box-shadow.

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

He aplicado display:block; al elemento de entrada.

---

actual Solución

yo preferiría no tener que hacer esto, pero esta es la única manera que puedo conseguir mi efecto deseado.

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

Incluso con esta solución, la sombra inserción en IOS no se procesa adecuadamente; pero está lo suficientemente cerca.

---

Mi pregunta

¿Es posible tener varias instancias de la caja-sombra en un solo elemento se muestra correctamente en dispositivos iOS? Si no, ¿qué pasa con la sombra del recuadro? ¿O estoy usando esta propiedad y sus valores incorrectamente?

¡Gracias de antemano!

Answer 1

Intenta agregar -webkit-appearance: none; iOS tiende a confundir formularios.