Safari中的边框半径和大范围展开放置阴影

Question

我今天遇到了Safari(11.0版(12604.1.38.1.7))、边界半径和大范围阴影的问题。Chrome、FF或Edge中不会出现此问题。

之所以使用大的阴影是为了实现元素可见的窗口状效果，并且阴影是半透明的，覆盖整个屏幕。

经过一些故障排除，我确定drop shadow在Safari中运行良好，但当扩散非常大时(如这里)以及当容器的边界半径都匹配时则不行。将一个角边界半径调整为一个像素不同，问题就消失了，阴影扩散可以按我想要的大小工作。

下面是一个快速而肮脏的CodePen演示这个问题
该按钮将切换相等与不相等边界半径类。但请随意调整方框阴影大小，并注意它在一定程度上都很好(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;
}

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

Answer 1

我不知道不相等的边界半径是怎么回事，但Safari似乎不能很好地处理非常大的框阴影，如果边界半径的扩散太大，就会拒绝绘制。如果你也设置了一个小的模糊半径(除了阴影的极端之外，这个半径不应该是明显的)，它确实有效：

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

然而，这将破坏Firefox。您应该检测Safari浏览器，并仅在Safari中应用此样式。

使用模糊半径和扩散值来获得所需最小大小的效果。

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