iPhone 6 Plus上的iOS 8盒子阴影

Question

我在iPhone 6 plus上使用box shadow属性时遇到了显示问题。

如果我添加标签width=device-width，则以下box shadow根本不会显示：

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

如果我不使用标签，则当您放大页面时，box shadow会 "神奇地" 消失。您可以在这里查看：

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

这似乎是特定于iPhone 6 plus的bug。在运行相同iOS版本（8.0.2）的旧版iPhone上，box shadows正常工作。

有没有人有解决方案？

- Maddiiiiis

---

尝试：-webkit-appearance: none; 只是一个注释。 - Mario Gonzales Flores

我在 iPhone 5 上遇到了同样的问题。如果没有 width=device-width，则可以看到框阴影，但是当屏幕缩放时，它会消失。 - Steven Lambert

Answer 1

您可以将 border-radius:1px 添加到 div 中。这将修复 iPhone 6+ 和其他 Retina 设备上的 box-shadow 问题。

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

- Vishnu Sankaran

---

好的解决方法。我使用 border-radius: 0.1px; 让它在 iPhone 6 Plus 上正常工作，几乎没有任何可见影响。 - Etienne

Answer 2

尝试使用-webkit-appearance: none;。你可以将其添加到全局重置中，以消除所有相关问题。我使用的是：

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

我还在其中重置了盒模型（box-sizing）。

- Benjamin