Retina iPad 上 iOS 7 中 WebKit 中的方框阴影传播错误答案

【问题标题】：Box shadow spread bug in WebKit in iOS 7 on Retina iPadsRetina iPad 上 iOS 7 中 WebKit 中的方框阴影传播错误
【发布时间】：2013-09-25 22:20:36
【问题描述】：

我发现 iOS 7 的 WebKit 中似乎存在错误，但仅限于 iPad 3 和 4，这让我相信它与硬件有关。

错误：如果我将扩展值（第四个值）添加到 CSS 框阴影，整个阴影就会消失。我已经举了一个例子here。

其他人可以在装有 iOS 7 的 iPad 3 和 4 上确认此错误吗？

【问题讨论】：

它在模拟器中工作：i.imgur.com/SHPWdC2.png，但你是对的，它不会在运行 iOS7 的 iPad 3 上呈现。
我不认为这是传播，因为它在我的 iPad 3 上工作。但是，无论有没有传播值，我页面上的某些框阴影都会在放大时完全消失。这当然是新 Safari 独有的。
我在 iphone5 和 5s 上对我拥有的一些自定义代码进行放大或横向模式时遇到了同样的问题。这实际上取决于应用的缩放程度。使用您的示例，当我切换到稍微缩放的风景时，我并没有失去阴影，但是随着我放大更多，我确实失去了阴影。所以看起来它放大了多少。

标签： ios ipad css webkit

【解决方案1】：

在 IOS 7.0.4 中仍然是一个问题。

添加一个像素的边框半径以强制浏览器在横向模式和缩放时渲染阴影。

border-radius: 1px;

【讨论】：

【解决方案2】：

更奇怪的是，我正在研究完全相同的问题。

如果你使用 inset，你可以定义你的传播，然后它就可以正常工作了！

另一个很好的事实是，当您将 ipad 设置为横向模式时，您的阴影将消失。

这是一个非常烦人的错误！

【讨论】：

【解决方案3】：

我在带有 iOs 7.0.3 的 iPad mini 上遇到了类似的问题问题出现在 safari 和 chrome 中

无论缩放如何，都没有出现带有嵌入框阴影的输入字段
出现了 div 阴影，但放大后变为一条线，进一步放大时也隐藏了该线。

我在另一个帖子上找到了这个解决方案：

“尝试添加-webkit-appearance: none;，因为iOS 往往会弄乱表单。”

它解决了问题！

【讨论】：

是的，也解决了我在 iOS 上的 box-shadow 问题，如下所述：stackoverflow.com/a/10757425

【解决方案4】：

在处理 Safari 和/或 iPad 问题（或两者兼有）时，我们找到了一个很好的经验法则。将以下规则放在元素或类上以强制硬件渲染。

transform: translate3d(0,0,0);

这解决了我在 iPad 上获得与其他设备相同的阴影（用作具有散布值的边框）呈现的问题。

【讨论】：

我在 iPadOS 15 上遇到了类似的带有文本阴影的问题，这解决了它。谢谢

【解决方案5】：

这里有类似的东西。将 box-shadow 应用于图像元素。它在缩放 = 1 时显示良好。但如果放大，它会在装有 iOS 7 的 iPad 3 上消失。

使用的 CSS 代码：

#photostrip > img {
    -webkit-box-shadow: 0px 6px 8px rgba(0,0,0,0.33);
       -moz-box-shadow: 0px 6px 8px rgba(0,0,0,0.33);
            box-shadow: 0px 6px 8px rgba(0,0,0,0.33);
}

【讨论】：

【解决方案6】：

iPad Air / iOS 7 存在同样的问题 :(

设置-webkit-appearance 没有帮助，border-radius 也没有。

我使用了以下 CSS 来修复它（它允许您在其他浏览器上使用传播设置，并仅覆盖 webkit/iOS）：

.box_shadowed 
{
    box-shadow: 2px 2px 4px 2px #ccc;
    -webkit-box-shadow: 2px 2px 4px #ccc;
}

【讨论】：

【解决方案7】：

我在装有 iOS7 的 iPad 4 上遇到了同样的问题。当我为元素设置 CSS 框阴影时，它会按预期显示在 iPad 纵向视图上。但是当我将 iPad 旋转到横向视图时，盒子阴影会消失。

我尝试了 StrandedPirate 的解决方案 - 将 1px 边框半径添加到元素，它成功了！该解决方案可能不适用于所有情况，但对于我的情况是可以采用的。

【讨论】：

【解决方案8】：

我遇到了同样的问题并添加了border-radius:1px 来解决它。

【讨论】：

【解决方案9】：

我正在使用：

border-radius: 100%;
box-shadow: 0 0 0 20000px rgba(255,255,255, .6);

并且 iPad（iOS 11）上没有出现阴影：Safari 和 Chrome。
我尝试了所有其他答案，但没有运气。

对我来说，解决方案是将点差从 20000px 减少到 922px。这是我可以使用的最大值，因此阴影会出现。

【讨论】：

【解决方案10】：

一条规则对我的情况没有帮助。最后，我修复了添加所有这些规则：

-webkit-appearance: none;
border:0;
border-radius: 1px;
height: 1px;

特别是设置height。

【讨论】：