iPhone iOS nie wyświetli prawidłowo box-shadow
Formularz kontaktowy na responsywnym projekcie zawiera pola wprowadzania zarówno z wbudowanym cieniem, jak i regularnym cieniem zewnętrznym. Zobacz obrazek poniżej.
Kodinput {
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);
}
ProblemiOS v4 + nie wyświetla prawidłowo cienia boxa. Zobacz obrazek poniżej.
PrzetestowanyPróbowałem użyć -webkit-box-shadow.
-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .25),
inset 2px 2px 3px rgba(0, 0, 0, .2);
zaaplikowałemdisplay:block;
do elementu wejściowego.
Wolałbym tego nie robić, ale to jedyny sposób, aby uzyskać pożądany efekt.
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);
}
Nawet z tym obejściem wbudowany cień na iOS nie jest prawidłowo renderowany; ale jest wystarczająco blisko.
Moje pytanieCzy jest możliwe, aby wiele wystąpień box-shadow na pojedynczym elemencie było poprawnie renderowane na urządzeniach z systemem iOS? Jeśli nie, co z wbudowanym cieniem? Czy mogę niepoprawnie używać tej właściwości i jej wartości?
Z góry dziękuję!