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, которые могут помочь с этим.

Answer 1

Я провел дополнительный поиск (для обрезки кнопок, не связанных с тенями на окнах в Safari) и нашел простое решение.

Добавление position: relative в .shadow позволяет элементу выходить за границытега <button> в Safari. Похоже, это также будет работать для переполнения текста и тому подобное.