Question

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

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

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

Answer 1

IOS 7.0.4仍是一个问题。

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

border-radius: 1px;

Answer 2

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

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

另一个很好的事实是，当你将ipad变成横向模式时，你的阴影将会消失。

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

Answer 3

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

输入字段都没有显示插入框阴影
div drop shadow出现，但放大后变为直线并进一步放大也隐藏了这条线。

我在另一个线程上找到了这个解决方案：

“尝试添加-webkit-appearance: none;，因为iOS会让表单变得混乱。”

它解决了问题！

Answer 4

这里有类似的东西。应用框阴影到图像元素。它在zoom = 1时显示正常。但如果放大，它将在iOS 3的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);
}

Answer 5

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 6

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

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

Answer 7

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

Answer 8

在处理野生动物园和/或iPad问题（或两者）时，我们发现了一个很好的经验法则。将以下规则放在元素或类上，以强制进行硬件渲染。

transform: translate3d(0,0,0);

这解决了我的问题，使阴影（用作具有扩展值的边框）可以在iPad上与其他设备一样渲染。

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。

框架阴影在Retina iPad上的iOS 7中的WebKit中传播错误

10 个答案: