web-dev-qa-db-ja.com

iPhone iOSはbox-shadowを適切に表示しません

デザイン

レスポンシブデザインの連絡先フォームには、内側の影と通常の外側の影の両方を持つ入力フィールドがあります。下の画像をご覧ください。

Input Field Design on Mobile

コード

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

問題

iOS v4 +は、ボックスシャドウを適切に表示しません。下の画像をご覧ください。

Input box-shadow rendered incorrectly

テスト済み

-webkit-box-shadowを使用しようとしました。

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

display:block;を入力要素に適用しました。

現在の回避策

これを行う必要はありませんが、これが目的の効果を得るための唯一の方法です。

[〜＃〜] 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);
    }

この回避策を使用しても、iOSのインセットシャドウは適切にレンダリングされません。しかし、それは十分に近いです。

私の質問

単一の要素に複数のbox-shadowのインスタンスをiOSデバイスで適切にレンダリングすることは可能ですか？そうでない場合、はめ込み影はどうですか？または、このプロパティとその値を誤って使用していますか？

事前に感謝します！

ioswebkitcss3mobile-webkit
49
rebz

IOSは-webkit-appearance: none;を追加してみて、フォームを台無しにする傾向があります。

153
Alex