CSS will-change breaks on Safari - html

Question

if I apply the will-change: opacity;property to my element with a fixed value of border radious, this will broke the css and not consider the overflow and the radius.
it just happens on Safari, the other browsers are ok.
.card{
border-radius: 80px;
height: 200px;
width: 200px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.bg-image{
position: absolute;
width: auto;
height: 100%;
display: block;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
will-change: opacity; // => COMMENT HERE and it's works
}
.card--content{
z-index: 30;
position: relative;
top: 40%;
height: 60%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
}
.card::before{
content: '';
display: block;
position: absolute;
bottom: 0;
height: 0;
width: 100%;
background-color: white;
z-index: 20;
will-change: height;
transition: height 0.24s ease-in-out;
}
.card::after{
content: '';
display: block;
position: absolute;
bottom: 0;
height: 100%;
width: 100%;
z-index: 10;
background: linear-gradient(180.49deg, rgba(136, 168, 187, 0.217) 40.63%, rgba(0, 122, 194, 0.7) 71.44%);
opacity: 1;
transition: opacity 0.25s linear;
}
.card:hover::after{
opacity: 0;
}
<div class="card">
<img class="bg-image lazy entered loaded" data-src="https://dummyimage.com/600 x 600/cfcfcf/fff.png" aria-label="" data-ll-status="loaded" src="https://dummyimage.com/600 x 600/cfcfcf/fff.png">
<div class="card--content">
content
</div>
</div>
someone had the same problem?
thanks