Safari 截断按钮内元素的框阴影

Question

我有一个按钮，里面有一个接收 box-shadow 的元素：

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 hacks 可以帮助解决这个问题。

Answer 1

我做了更多搜索（Safari 中按钮上与非框阴影相关的剪辑）并找到了一个简单的解决方案。

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