css - Safari 中的边框半径和大范围阴影

Question

我今天在使用 Safari(版本 11.0 (12604.1.38.1.7))时遇到了一个问题，边界半径和一个大范围的阴影。这个问题不会在 Chrome、FF 或 Edge 中发生。

大阴影的原因是为了实现元素可见的类似窗口的效果，并且阴影是半透明的覆盖整个屏幕。

经过一些故障排除后，我确定投影在 Safari 中工作正常，但当传播非常大(如此处)并且容器的边界半径完全匹配时则不然。将一个 Angular 的边界半径调整为一个像素的差异，问题就消失了，阴影展开以我想要的大小工作。

Here's a quick and dirty CodePen demonstrating the issue.
该按钮将切换相等与不相等的边界半径类。但是请随意调整 box-shadow 的大小，并注意它在特定点上工作正常(2039px 有效，2040px 无效。这与我之前在我自己的代码中创建的断点略有不同，即 ~2019) .

我想我也必须在这里粘贴 CodePen 的代码。

HTML

<div class='wrapper'>
  <div id='box-shadow-container' class="equal-border-radius">
    <div id='box-shadow-fun'> 
    What's going on here? <br/><br/>
    <button id='toggle-radius-class'> Swap Border Radius Class</button>
  </div>
  </div>
</div>

CSS

body {
  display: flex;
  flex-direction: column;
  min-height: 400px;
}

.wrapper {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#box-shadow-fun {
  padding: 5px;
}

#box-shadow-container {
  border: 1px solid #CCC;
  box-shadow: 0 0 0 5000px black;
}

.one-different-border-radius {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 4px;
}

.equal-border-radius {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

有人知道这里的问题吗？我可以接受一个 Angular 的像素半径不同，但我不喜欢不理解错误修复，因为它似乎在未来可能会崩溃，而且我仍然不知道发生了什么。

Answer 1

我不知道不相等的边界半径是怎么回事，但似乎 Safari 不能很好地处理非常大的框阴影，如果边界半径的传播太大，Safari 将拒绝绘制它。如果您还设置了一个小的模糊半径(除了在阴影的极端处，它不应该被注意到)，它确实有效:

#box-shadow-container {
  box-shadow: 0 0 500px 5000px black;
                  ^^^^^
}

但是这会破坏 Firefox。您应该检测 Safari 浏览器并仅在 Safari 中应用此样式。

尝试使用模糊半径和扩散值来获得在您需要的最小尺寸下工作的东西。