仅在 Chrome 中出现奇怪的 CSS 阴影错误？答案

【问题标题】：Strange CSS drop-shadow bug in Chrome only?仅在 Chrome 中出现奇怪的 CSS 阴影错误？
【发布时间】：2020-05-21 14:48:06
【问题描述】：

在正在开发的网站上看到一个带有大阴影的非常奇怪的故障。似乎只发生在 Chrome 中。调整窗口大小时，故障会消失并重新出现。

网址：https://w3stage.com/pok/order/

img：drop shadow issue

css:

.set-container {
    background: #f7f7f7;
    border-radius: 7px 7px 0 0;
    padding: 30px;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    width: 90%;
    box-shadow: 0 70px 70px rgba(0,0,0,1);
    display: flex;
    align-items: center;
    align-content: center;
}

编辑：我在 macOS 上，Chrome 版本 81.0.4044.138（官方构建）（64 位）

【问题讨论】：

无法复制Version 81.0.4044.138 (Official Build) (64-bit) Win8

标签： css dropshadow

【解决方案1】：

我设法在特定的窗口大小上得到了相同的结果。

我玩了一会儿，似乎取消了这个问题的是从 .set-container 类定义中删除 border-radius 定义。

我不确定它为什么会起作用，但根据我的经验，阴影和边框半径有时会出现问题。您可以考虑重组该部分或仅删除边界半径。

正如附加信息一样，我能够在以下位置重现该问题：

Chrome 83.0.4103.61（64 位）

窗口大小：936 <= Width < 1200 和 701 < Height < 763。

我不确定在你的情况下这些尺寸是否有特定的地方，但这就是我似乎得到额外阴影的地方。

更新

我确实测试了其他没有边界半径问题（据我所知）的东西。

我从box-shadow 切换到filter: drop-shadow。最终结果是这一行：

filter: drop-shadow(0 70px 70px black);

它看起来与 box-shadow 规则有点不同，但可以解决问题并且边框半径没有问题。

【讨论】：

谢谢，这似乎解决了它。不是我对设计的要求，但我现在至少可以向他们展示。
@Phil 我添加了一个可以用来代替box-shadow 的不同选项。据我测试，border-radius 没有问题。请检查一下，让我知道它是否适合您。

【解决方案2】：

我在 PC 上的 Chrome v86 和 iPad 上的 Chrome v86 中也看到了这种异常。我发现通过从父 div 中删除 overflow: hidden 到我的图像（有阴影），我可以可靠地使效果减半（嗯？）。

【讨论】：