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

Question

悬停时我想缩放圆形的背景图像而不进行过渡，它适用于所有浏览器，但在 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>

Answer 1

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

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

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

萨姆；）