Search code examples
csssafaribox-shadow

Safari cuts off box-shadow of element inside button

I have a button with an element inside it that receives 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>

In Safari, this shadow gets cut off at the edge of the <button> element and looks like this:

Button with inner box-shadow cut off in Safari

As you can see I tried -webkit-appearance: none and overflow: visible already. I've also found that this issue does not occur if I change the button to a div, but this is meant to be an interactive element so for accessibility reasons it's not a good idea.

In searching for this issue I haven't found much help so far but I'm wondering if anyone might know of any recent workarounds or Safari CSS hacks that could help with this.

Solution

  • I did some more searching (for non-box-shadow-related clipping on buttons in Safari) and found a simple solution.

    Adding position: relative to .shadow lets the element extend beyond the bounds of the <button> tag in Safari. It sounds like this would also work for text overflowing and such.