Safari 中的边框半径和大散布阴影答案

【问题标题】：Border Radius and Large Spread Drop Shadow in SafariSafari 中的边框半径和大散布阴影
【发布时间】：2017-11-08 08:44:52
【问题描述】：

我今天遇到了 Safari（版本 11.0 (12604.1.38.1.7)、边框半径和较大的散布阴影）的问题。这个问题在 Chrome、FF 或 Edge 中不会发生。

投影大的原因是为了达到一个窗口的效果，元素可见，投影是半透明的，覆盖整个屏幕。

经过一些故障排除后，我确定投影在 Safari 中可以正常工作，但当传播非常大（如此处）和容器的边框半径全部匹配时，就不行了。将一个角的边框半径调整为一个像素不同，问题就消失了，阴影分布在我想要的大小上起作用。

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;
}

有人知道这里的问题吗？我可以忍受一个角落的像素半径不同，但我不喜欢不理解错误修复，因为它似乎将来可能会中断，我仍然不知道发生了什么。

【问题讨论】：

标签： css safari

【解决方案1】：

我不知道不等的边框半径是怎么回事，但 Safari 似乎不能很好地处理非常大的盒子阴影，如果边框半径的散布太大，它将拒绝绘制它。如果您还设置了一个小的模糊半径（除非在阴影的极端情况下应该不明显），它确实有效：

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

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

玩弄模糊半径和散布值，以获得在您需要的最小尺寸下工作的东西。

【讨论】：

确认此方法有效（但不能使用非常小的模糊值）并且确实会破坏 Firefox...！

【解决方案2】：

我不知道问题的原因，但您可以通过使用 calc 来修复它，而无需使边界半径之一不同：

.thing-with-box-shadow {
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
    border-radius: 50%;

    // makes the box shadow appear on Safari
    border-bottom-right-radius: calc(50% + 0px);
}

【讨论】：