ios - regresar - raya azul pantalla ipad

iPhone iOS no mostrará la sombra de cuadro correctamente

Question

El diseño

El formulario de contacto en un diseño receptivo tiene campos de entrada con una sombra insertada y una sombra exterior 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);
}

La cuestión

iOS v4 + no muestra la sombra de caja correctamente. Ver la imagen a continuación.

Probado

Intenté 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.

Solución actual

Preferiría no tener que hacer esto, pero esta es la única forma en que puedo obtener el 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 insertada en iOS no se procesa correctamente; pero está lo suficientemente cerca.

Mi pregunta

¿Es posible tener múltiples instancias de box-shadow en un solo elemento renderizado correctamente en dispositivos iOS? Si no, ¿qué pasa con la sombra del recuadro? ¿O estoy usando esta propiedad y sus valores incorrectamente?

¡Gracias por adelantado!

Answer 1

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