I'm struggling with a button that has an element inside receiving a 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>The shadow on Safari is getting clipped at the edge of the <button> and looks like this:
https://i.stack.imgur.com/YLdhz.png
I've tried using -webkit-appearance: none and overflow: visible, but haven't had any luck. Changing the button to a div works, but as it's meant to be interactive for accessibility reasons, it's not ideal.
If anyone knows of any recent workarounds or CSS hacks specifically for Safari that could help resolve this issue, I would greatly appreciate it.