ホバリングズームボーダー半径50％の背景画像はサファリでバグがありますが、どのように修正するのですか？

Question

on hover私はトランジションなしでサークルの背景イメージをズームしたいと思っています。それはすべてのブラウザで動作しますが、サファリにバグがあります。

私はこのフィドルを持っていますhttps://jsfiddle.net/yv0a6hnv/4/すべてがクロムで完璧に機能しますが、サファリではどのようにバグが修正されていますか？前もって感謝します。

.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 */ 
 
    \t 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

簡単な修正は、親（.circle-box）にtransform: translateZ(0);を追加することです。 これはSafari /いくつかの他のWebkitブラウザの不満なバグです。この修正では、それ自身のレイヤーにサークルボックスが設定され、正しく再描画できるようになりました。

私はうまくいけば、あなたはすでにそれを固定ではなく楽しんでいない場合てきたあなたはhttps://jsfiddle.net/yv0a6hnv/5/

をいじる更新しました。

サム;）