边界半径为 50% 过渡的悬停缩放背景图像在 safari 中有错误，如何解决？

Question

悬停时我想缩放圆圈的背景图像而无需过渡它适用于所有浏览器但在 safari 中有过渡它的错误。

我有这个 fiddle 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 浏览器中令人沮丧的错误。该修复将圆框设置在它自己的层上，允许正确重绘。

我给你更新了fiddlehttps://jsfiddle.net/5fxad8s9/

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

萨姆 ;)

边界半径为 50% 过渡的悬停缩放背景图像在 safari 中有错误，如何解决？

on hover zoom background image with border radius 50% transition is buggy in safari, how to fix it?

css

css-transitions

css-transforms