-webkit-box-shadow not working on safari 14 - css

Question

I am using CSS box-shadow property which is working fine on google chrome and Firefox but unfortunately its not working on Safari browser (mobile and mac both) Safari version I am using is 14.
my CSS code :
.testing-class{
content: '';
height: auto;
position: absolute;
z-index: 9;
width: 100%;
bottom: 0px;
display: block;
-webkit-appearance: none;
-moz-box-shadow: 0px 7px 48px 74px #fff;
-webkit-box-shadow: 0px 7px 48px 74px white;
box-shadow: 0px 7px 48px 74px #fff;
margin-top: 21px;
}

Answer 1

it's only working for display: block elements; try to add that to your css code

Answer 2

Faced the same issue in safari . either box shadowing was not working or when you add border-radius: 50%; to your css you will see a box like structure hidden behind the button
when I removed the position:absolute and used the css
.testing-class{
content: '';
height: auto;
z-index: 9;
width: 100%;
bottom: 0px;
display: block;
-webkit-appearance: none;
-moz-box-shadow: 0px 7px 48px 74px #fff;
-webkit-box-shadow: 0px 7px 48px 74px white;
box-shadow: 0px 7px 48px 74px #fff;
margin-top: 21px;
}
it was working perfectly fine in safari after removing position:absolute .. But i wanted position:absolute to be included . so i created an inner and outer tag . For example
<div className="outer">
<div className="inner">
</div>
</div>
Add more margin space to
.outer{
position: absolute;
z-index: 3;
margin: 9px;
box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%),
0 1px 18px 0 rgb(0 0 0 / 12%);
}
.inner {
z-index: 3;
and rest of the css
}
only change here is adding more margin around the button will occupy the button space and will block access to rest of the elements so used outer and inner.Above listed fix worked for me .If it doesnot work try to experiment around it , it might work .