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/yv0a6hnv/5/

希望你已经修好了，但如果不喜欢的话。

Sam;）

在悬停缩放背景图像与边界半径50％过渡是野生动物园的错误，如何解决？

1 个答案: