IOS 8 Box Schatten auf dem iPhone 6 Plus

Question

Ich habe ein Display-Problem mit der Box Schatten Eigenschaft speziell auf dem iPhone 6 plus. Wenn ich das Meta-Tag width=device-width, das folgende Feld ein Schatten hinzufügen, wird nicht angezeigt:

-webkit-box-shadow: 1px 1px 5px 5px #a8a8a8; box-shadow: 1px 1px 5px 5px #a8a8a8;

Wenn ich nicht das Meta-Tag verwenden Schatten Feld „magische Weise“ verschwinden, wenn Sie den Zoom-in Seite. Sie können dies hier begreifen:

http://jsfiddle.net/b6aaq57z/3/

Dies scheint eine spezifische iPhone 6 und Bug zu sein. Bei älteren iPhone-Versionen, die dieselbe iOS-Version (8.0.2) verwenden, funktionieren die Box-Schatten ordnungsgemäß.

Gibt es jemanden mit einer Lösung?

Answer 1

Versuchen -webkit-apperance: none;

mit Sie können dies mit Ihrem globalen Reset fügen Sie alle Probleme mit diesem zu beseitigen. Ich benutze:

*, *:before, *:after { 
    -webkit-appearance: none; 
} 

Ich habe auch meine Box-Sizing-Reset in dort auch.

Answer 2

Sie können border-radius: 1px dem div. Hinzufügen. Es behebt das Box-Shadow-Problem in iPhone 6+ und anderen Retina-Geräten.

.box-shadow{ 
-webkit-box-shadow: 1px 1px 0.25em 0.25em #a8a8a8; 
box-shadow: 1px 1px 0.25em 0.25em #a8a8a8; 
border-radius:1px;}