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

Question

on hover i want to zoom the background image of a circle without transition it works in all the browser but with transition in safari its buggy.

I have this fiddle https://jsfiddle.net/yv0a6hnv/4/ everything works perfectly in chrome, but in safari the transition is buggy how to fix it? Thanks in advance.

.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

The simple fix is to add transform: translateZ(0); to the parent (.circle-box). This is a frustrating bug in Safari / some other webkit browsers. The fix sets the circle-box on it's own layer allowing to to redraw correctly.

I've updated you fiddle https://jsfiddle.net/5fxad8s9/

Hopefully you've already fixed it but if not enjoy.

Sam ;)