iPhone iOS zeigt Box-Shadow nicht richtig an

Das Design

Das Kontaktformular in einem responsiven Design enthält Eingabefelder, die sowohl einen eingefügten als auch einen regulären Außenschatten enthalten. Siehe Bild unten.

Der 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);
}
Die Angelegenheit

iOS v4 + zeigt den Box-Shadow nicht richtig an. Siehe Bild unten.

Geprüft

Ich habe versucht, -webkit-box-shadow zu verwenden.

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

Ich habe mich beworbendisplay:block; zum Eingabeelement.

Aktuelle Problemumgehung

Ich würde es vorziehen, wenn ich das nicht tun müsste, aber nur so kann ich meinen gewünschten Effekt erzielen.

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

Selbst mit dieser Problemumgehung wird der eingefügte Schatten unter iOS nicht richtig gerendert. aber es ist nah genug.

Meine Frage

Ist es möglich, dass mehrere Instanzen von Box-Shadow auf einem einzelnen Element auf iOS-Geräten ordnungsgemäß gerendert werden? Wenn nicht, was ist mit dem eingeschobenen Schatten? Oder verwende ich diese Eigenschaft und ihre Werte falsch?

Danke im Voraus!

Antworten auf die Frage(1)

Ihre Antwort auf die Frage