12

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

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

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

4

10 回答 10

8

IOS 7.0.4 中仍然存在问题。

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

border-radius: 1px;
于 2014-01-24T03:01:32.437 回答
3

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

transform: translate3d(0,0,0);

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

于 2018-09-12T17:20:50.770 回答
2

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

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

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

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

它解决了问题！

于 2013-11-07T17:44:09.077 回答
2

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

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

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

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

于 2013-09-30T20:10:22.437 回答
0

Same issue with iPad Air / iOS 7 :(

Setting -webkit-appearance didn't help, neither did border-radius.

I used the following CSS to fix it (it lets you use the spread setting on other browsers, and overrides for webkit/iOS only):

.box_shadowed 
{
    box-shadow: 2px 2px 4px 2px #ccc;
    -webkit-box-shadow: 2px 2px 4px #ccc;
}
于 2014-04-23T03:43:42.897 回答
0

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

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

于 2014-05-28T06:15:09.433 回答
0

这里有类似的东西。将 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);
}
于 2013-11-06T14:46:31.880 回答
0

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

于 2014-06-11T14:14:32.077 回答
0

我正在使用： 

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

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

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

于 2019-02-25T08:45:07.903 回答
0

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

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

特别是设置也height。

于 2021-03-31T14:30:47.167 回答