iPhone-iOS werden nicht angezeigt, box-shadow richtig

Das Design

Das Kontakt-Formular auf ein responsive design hat Eingabefelder mit einem inset-Schatten und regelmäßig außerhalb der Schatten. Siehe Bild unten.

---

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

---

Das Problem

iOS v4+ nicht angezeigt, die box-shadow richtig. Siehe Bild unten.

---

Getestet

Habe ich versucht, mit -webkit-box-shadow.

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

Habe ich angewendet display:block; auf das input-element.

---

Aktuelle Problemumgehung

Ich würde es vorziehen, nicht zu tun, denn dies ist der einzige Weg, ich kann meinen gewünschten Effekt.

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

Sogar mit dieser Problemumgehung, die inset-Schatten auf iOS nicht richtig dargestellt; aber es ist nah genug.

---

Meine Frage

Ist es möglich, mehrere Instanzen von box-shadow auf einem einzelnen element richtig dargestellt, auf iOS-Geräten? Wenn nicht, was ist der inset-Schatten? Oder bin ich mit dieser Eigenschaft und Ihrer Werte falsch?

Vielen Dank im Voraus!

InformationsquelleAutor der Frage rebz | 2012-05-25