css - トランジションを伴う CSS スケール変換はクリップパスを無視します

Question

transfomが行われている間、はclip-path無視されているようです:

var zoom = false;

setInterval(function(){

  if(zoom == false) {
    zoom = true;
    $('.circle').attr('class','circle zoom');
  }
  else {
   	$('.circle').attr('class','circle');
    zoom = false;
  }   
},1000);

.wrapper {
  display:inline-block;
  
  -webkit-clip-path: circle(120px at center);
  clip-path: circle(120px at center);
}

.zoom {
  transform: scale(1.1);
}

.circle{
  display:block;
  
  transition: all .2s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <img src="//placehold.it/300" alt="" class="circle">
</div>

これがなぜなのか、これを防ぐ方法を知っている人はいますか?