iPhone iOS zeigt Box-Shadow nicht richtig an
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 Codeinput {
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 AngelegenheitiOS v4 + zeigt den Box-Shadow nicht richtig an. Siehe Bild unten.
GeprüftIch 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.
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 FrageIst 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!