在 safari 中，边框半径为 50% 过渡的悬停缩放背景图像有问题，如何解决？答案

【问题标题】：on hover zoom background image with border radius 50% transition is buggy in safari, how to fix it?在 safari 中，边框半径为 50% 过渡的悬停缩放背景图像有问题，如何解决？
【发布时间】：2020-09-07 22:23:37
【问题描述】：

在悬停时我想缩放一个没有过渡的圆圈的背景图像，它在所有浏览器中都可以使用，但在 safari 中的过渡它有问题。

我有这个小提琴 https://jsfiddle.net/yv0a6hnv/4/ 一切都在 chrome 中完美运行，但在 safari 中，过渡是错误的，如何修复它？提前致谢。

.circle-box{
  overflow:hidden;
  -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -khtml-border-radius: 50%;
  display: block;
}
.circle {
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    position: relative; /* If you want text inside of it */
  	transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
      background-position:center;
  background-image: url("http://www.planwallpaper.com/static/images/6768666-1080p-wallpapers.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -khtml-border-radius: 50%;
}
.circle-box:hover .circle {
  transform: scale(1.1);
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1); /* IE 9 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand')"; /* IE8 */
   filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand'); /* IE6 and 7 */
}

/* If you want text inside of the container */
.circle .text {
  color:white;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    left: 0;
    bottom: 0;
    right: 0;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
      <div class="row text-center">
          <div class="col-md-3 col-sm-6">
            <a href="#" class="circle-box">
              <div class="circle">
                <h1 class="text">Heading</h1>
              </div>
            </a>
          </div>
          <div class="col-md-3 col-sm-6">
            <a href="#" class="circle-box">
              <div class="circle">
                <h1 class="text">Heading</h1>
              </div>
            </a>
          </div>
          <div class="col-md-3 col-sm-6">
            <a href="#" class="circle-box">
              <div class="circle">
                <h1 class="text">Heading</h1>
              </div>
            </a>
          </div>
          <div class="col-md-3 col-sm-6">
            <a class="circle-box" href="">
              <div class="circle">
                <h1 class="text">Heading</h1>
              </div>
            </a>

          </div>
        </div>

【问题讨论】：

标签： css css-transitions css-transforms

【解决方案1】：

简单的解决方法是将 transform: translateZ(0); 添加到父级 (.circle-box)。这是 Safari / 其他一些 webkit 浏览器中的一个令人沮丧的错误。该修复将圆形框设置在它自己的图层上，以便正确重绘。

我已经更新了你的小提琴https://jsfiddle.net/5fxad8s9/

希望您已经修复了它，但如果不喜欢的话。

山姆 ;)

【讨论】：