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

Question

我今天在使用 Safari(版本 11.0 (12604.1.38.1.7)、边框半径和大范围投影时遇到了问题。Chrome、FF 或 Edge 中不会出现此问题。

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

经过一些故障排除后，我确定投影在 Safari 中可以正常工作，但当分布非常大(如此处)并且容器的边框半径全部匹配时，效果就不行了。将一个 Angular 边框半径调整为相差 1 个像素，问题就消失了，并且投影范围达到了我想要的大小。

Here's a quick and dirty CodePen demonstrating the issue.
该按钮将切换相等与不相等的边框半径类别。但请随意调整盒子阴影大小，并注意它在某个点上工作正常(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 似乎不能很好地处理非常大的盒子阴影，并且如果边框半径太大，它将拒绝绘制它。如果您还设置了一个小的模糊半径(除非在阴影的最极端处，否则应该不会被注意到)，它确实有效:

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

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

尝试调整模糊半径和散布值，以获得可以在您需要的最小尺寸下工作的东西。