奇怪的 CSS 投影错误仅在 Chrome 中？

Question

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

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 位）

Answer 1

我设法在特定 window 尺寸下获得了相同的结果。

我试了一下，似乎解决这个问题的方法是从 .set-container class 定义中删除 border-radius 定义。

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

作为附加信息，我能够在以下位置重现该问题：

Chrome 83.0.4103.61 (64-bit)

Window size: 936 <= Width < 1200 and 701 < Height < 763.

我不确定在你的案例中是否有关于这些尺寸的特定内容，但这就是我似乎得到额外阴影的地方。

更新

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

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

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

它看起来与 box-shadow 规则有点不同，但确实有效，并且没有 border-radius 问题。

Answer 2

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

奇怪的 CSS 投影错误仅在 Chrome 中？

Strange CSS drop-shadow bug in Chrome only?

css

dropshadow