仅限 Safari，div 背景图像悬停效果失去边框半径

Question

仅在 Safari 中，当我将鼠标悬停在 .panel-bg 上时，.panel 会在几分之一秒内失去其边界半径。

如果我为.panel-bg 禁用规则-webkit-transition: all 300ms ease-in-out;，此效果就会消失。

有什么解决方案可以让.panel-bg:hover {transform: scale(1.03);} 保持过渡而不使.panel 失去其边界半径吗？

帮助表示赞赏。

.panel {
    width: 400px;
    height: 250px;
    background-size: contain;
    list-style: none;
    text-align: left;
    max-width: 100%;
    height: 200px;
    vertical-align: bottom;
    position: relative;
    color: #fff;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    margin-right: 30px;
    margin-bottom: 30px;
    overflow: hidden;
    padding: 40px;
    transition: all .5s 0s ease;
}
.panel-bg {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: inline-block;
    -webkit-transition: all 300ms ease-in-out;
    background-size: cover;
    background-position: center center;
    z-index: 0;
}
.panel-link {
    color: #fff;
    width: 100%;
    height: 100%;
    display: inline-block;
}
.panel-bg:focus, .panel-bg:hover {
    transform: scale(1.03);
}
.panel-text {
    position: absolute;
    bottom: 35px;
    text-transform: uppercase;
    font-size: 2rem;
    font-family: 'Roboto',Helvetica,Arial,sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
}

<li class="panel">
  <div style="background-image: linear-gradient(to bottom, rgba(21, 21, 21, 0),rgba(21, 21, 21, 0),rgba(21, 21, 21, 0), rgba(21, 21, 21, 0.7)), url('https://herodevelopment.com.au/allbathroomgear/wp-content/uploads/2021/02/laundry.jpg')" class="panel-bg"></div>
  <a href="#" title="Laundries" class="panel-link">
    <span class="panel-text">Laundries</span>
  </a>
</li>

Answer 1

这个问题似乎一直存在。

基于@nickspiel 早在 2013 年在css3 border radius animation transition in safari not working 中提供的修复，并且仅通过注意到如果我们添加现在不需要径向渐变前缀来进行更改

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

到 父 元素，这会掩盖角落，因此看不到图像的过渡“角落”。

.panel {
    width: 400px;
    height: 250px;
    background-size: contain;
    list-style: none;
    text-align: left;
    max-width: 100%;
    height: 200px;
    vertical-align: bottom;
    position: relative;
    color: #fff;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    margin-right: 30px;
    margin-bottom: 30px;
    overflow: hidden;
    padding: 40px;
    transition: all .5s 0s ease;
    -webkit-mask-image: radial-gradient(white, black);/* ADDED */
}
.panel-bg {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: inline-block;
    -webkit-transition: all 300ms ease-in-out;
    background-size: cover;
    background-position: center center;
    z-index: 0;
}
.panel-link {
    color: #fff;
    width: 100%;
    height: 100%;
    display: inline-block;
}
.panel-bg:focus, .panel-bg:hover {
    transform: scale(1.03);
}
.panel-text {
    position: absolute;
    bottom: 35px;
    text-transform: uppercase;
    font-size: 2rem;
    font-family: 'Roboto',Helvetica,Arial,sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
}

<li class="panel">
  <div style="background-image: linear-gradient(to bottom, rgba(21, 21, 21, 0),rgba(21, 21, 21, 0),rgba(21, 21, 21, 0), rgba(21, 21, 21, 0.7)), url('https://herodevelopment.com.au/allbathroomgear/wp-content/uploads/2021/02/laundry.jpg')" class="panel-bg"></div>
  <a href="#" title="Laundries" class="panel-link">
    <span class="panel-text">Laundries</span>
  </a>
</li>