CSS Will-Crange break on safari

Question

如果我将will-change：opacity;属性应用于固定的边框Radious的元素，这将破坏CSS，而不考虑溢出和半径。

它只是在Safari上发生，其他浏览器还可以。

.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>

有人有同样的问题吗？ 谢谢

Answer 1

我找到了一个解决方案，但我认为不是最好的。但是目前是我找到的最好的解决方案。希望有人找到更好的一个。

我正在使用

-webkit-mask-image:-webkit-radial-gradient(white, black);
        mask-image:-webkit-radial-gradient(white, black);