在 Retina iPad 上的 iOS 7 中的 WebKit 中的盒子阴影传播错误

Question

我在iOS 7的WebKit中发现了一个错误，但仅限于iPad 3和4，这让我相信它在某种程度上与硬件有关。

错误：如果我将扩散值（第四个值）添加到CSS框阴影中，整个阴影就会消失。我在这里放了一个考试。

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

Answer 1

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

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

border-radius: 1px;

Answer 2

我们在处理 safari 和/或 iPad 问题（或两者兼而有之）时发现了一个很好的经验法则。将以下规则放在元素或类上以强制硬件呈现。

transform: translate3d(0,0,0);

这解决了我让阴影（用作扩散值的边框）在 iPad 上渲染与其他设备相同的问题。

Answer 3

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

如果您使用插图，您可以定义您的点差，然后它工作正常！

另一个很好的事实是，当您将iPad切换到横向模式时，您的Dropshadow将消失。

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

Answer 4

>我在带有 iOs 7.0.3 的 iPad mini 上遇到了类似的问题该问题同时出现在Safari和Chrome中

1. 无论缩放如何，带有插图框阴影的输入字段都不会显示
2. div 投影出现，但放大时更改为一条线并进一步放大隐藏该线。

我在另一个线程上发现了这个解决方案：

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

它解决了问题！

Answer 5

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

使用的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);
}

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

Answer 7

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

我尝试了搁浅海盗的解决方案 - 为元素添加 1px 边框半径，它奏效了！此解决方案可能不适用于所有情况，但对于我的情况，它是可采用的。

Answer 8

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

Answer 9

我正在使用：

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

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

我的解决方案是减少从20000px到922px的传播。这是我可以使用的最大值，以便出现阴影。

Answer 10

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

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

特别设置也是height。