web-dev-qa-db-fra.com

iPhone iOS n'affichera pas correctement l'ombre de la boîte

La conception

Le formulaire de contact sur une conception réactive a des champs de saisie avec à la fois une ombre incrustée et une ombre extérieure régulière. Voir l'image ci-dessous.

Input Field Design on Mobile

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

Le problème

iOS v4 + n'affiche pas correctement l'ombre de la boîte. Voir l'image ci-dessous.

Input box-shadow rendered incorrectly

Testé

J'ai essayé d'utiliser -webkit-box-shadow.

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

J'ai postulé display:block; à l'élément d'entrée.

Solution de contournement actuelle

Je préférerais ne pas avoir à faire cela, mais c'est la seule façon d'obtenir l'effet désiré.

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

Même avec cette solution de contournement, l'ombre incrustée sur iOS n'est pas rendue correctement; mais c'est assez proche.

Ma question

Est-il possible d'avoir plusieurs instances de box-shadow sur un seul élément rendu correctement sur les appareils iOS? Sinon, qu'en est-il de l'ombre incrustée? Ou est-ce que j'utilise mal cette propriété et ses valeurs?

Merci d'avance!

ioswebkitcss3mobile-webkit
49
rebz

Essayez d'ajouter -webkit-appearance: none; iOS a tendance à gâcher les formulaires.

153
Alex