Animation Under iframe bug in Chrome

HTML

<iframe width="300" height="300" src="http://www.youtube.com/embed/03Cp9tTOMDA" frameborder="0" allowfullscreen></iframe>
 
<div class="wrap">
  <div class="inner">
    <div class="slide"><img src="http://lorempixel.com/300/300/city/2" /></div>
    <div class="slide"><img src="http://lorempixel.com/300/300/city/4" /></div>
    <div class="slide"><img src="http://lorempixel.com/300/300/city/8" /></div>
    <div class="slide"><img src="http://lorempixel.com/300/300/city/9" /></div>
  </div>
</div>
<a href="#" class="button">Next Slide</a>

CSS

* {
  margin: 0;
  padding: 0;
}

iframe {
  display: block;
  float: left;
}

.wrap {
  float: left;
  height: 300px;
  overflow: hidden;
  position: relative;
  width: 300px;
}

.inner {
  height: 300px;
  left: 0;
  position: absolute;
  top: 0;
  width: 1200px;
  
}

.slide {
  float: left;
  height: 300px;
  width: 300px;
}

.slide:nth-child(1) { background: red; }
.slide:nth-child(2) { background: green; }
.slide:nth-child(3) { background: blue; }
.slide:nth-child(4) { background: magenta; }

JavaScript

var inner = $('.inner');
$('.button').on('click', function(e){
  e.preventDefault();
  if(parseInt(inner.css('left'), 10) > -900){
    inner.stop(false, true).animate({
      'left': '-=300px'
    }, 300);
  } else {
    inner.stop(false, true).animate({
      'left': '0'
    }, 300);
  }
});