5

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.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
M. Aho
  • 318
  • 2
  • 7

1 Answers1

8

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.

M. Aho
  • 318
  • 2
  • 7
  • This solved my problem, thank you!! do you have a link to the explanation why this happened? – Alvin Novian Jul 22 '20 at 04:22
  • 1
    I don't think I found a specific explanation, just other stackoverflow posts about other issues that I thought I'd try to see if they worked. Seems like Safari just doesn't do overflow correctly on buttons – M. Aho Jul 28 '20 at 22:23