Safari 会切断按钮内元素的框阴影

Question

我有一个按钮，里面有一个接收框阴影的元素：

button {
  padding: 0;
  border: 0;
  margin: 0;
  overflow: visible;
  -webkit-appearance: none;
  background: white;
}

.shadow {
  display: inline-block;
  vertical-align: middle;
  height: 40px;
  width: 40px;
  border-radius: 20px;
  background: #dddddd;
  box-shadow: 0 0 20px black;
}

<button>
  <span class="shadow"></span>
  <span>Some Text</span>
</button>

在 Safari 中，此阴影在 <button> 元素的边缘被切断，看起来像这样：

如您所见，我已经尝试了 -webkit-appearance: none 和 overflow: visible。我还发现，如果我将按钮更改为 div，则不会出现此问题，但这意味着是一个交互式元素，因此出于可访问性原因，这不是一个好主意。

在搜索这个问题时，到目前为止我没有找到太多帮助，但我想知道是否有人可能知道任何最近的解决方法或 Safari CSS 黑客可以帮助解决这个问题。

Answer 1

我进行了更多搜索（针对 Safari 中按钮上与框阴影无关的裁剪）并找到了一个简单的解决方案。

将 position: relative 添加到 .shadow 可以让元素扩展到 Safari 中 <button> 标签的范围之外。听起来这也适用于文本溢出等情况。

Safari 会切断按钮内元素的框阴影

Safari cuts off box-shadow of element inside button

css

safari

box-shadow