仅限Safari，div背景图像悬停效果会丢失边界半径 [英] Safari only, div background-image hover effect losing border-radius

问题描述

仅在Safari中，当我将鼠标悬停在 .panel-bg 上时， .panel 的边界半径会丢失一秒钟.

In Safari only, when I hover over .panel-bg, .panel loses its border-radius for a fraction of a second.

如果我禁用规则 -webkit-transition:全部300ms缓入； 用于 .panel-bg ，则此效果消失.

If I disable the rule -webkit-transition: all 300ms ease-in-out; for .panel-bg this effect goes away.

有没有解决方案，所以我们可以保持过渡 .panel-bg:hover {transform:scale(1.03);} ，而不会使 .panel 失去边界半径?

Is there any solution so we can maintain the transition .panel-bg:hover {transform: scale(1.03);} without .panel losing its border-radius?

帮助表示赞赏.

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

推荐答案

这个问题似乎一直存在.

This problem seems to have been around forever.

基于 css3边框半径动画过渡中提供的修复程序在野生动物园中不起作用早在2013年就由@nickspiel进行了修改，仅在注意到我们添加了

Based on a fix provided in css3 border radius animation transition in safari not working way back in 2013 by @nickspiel and altered only by noticing we don't need a prefix on radial gradients now if we add

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

对于父级元素，它会遮盖角落，因此看不到图像的过渡角".

to the parent element this masks the corner so the image's transition 'corners' are not seen.

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

这篇关于仅限Safari，div背景图像悬停效果会丢失边界半径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！