Chrome bug

mouse event on 3d elements on transitions

HTML

<div id="box1" class="left">box 1</div>
<div id="box2" class="right">box 2</div>

<div id="console"></div>

CSS

#box1, #box2 {
  position:absolute;
  background:#f00;
  width:100px;
  height:100px;
  -webkit-transform: translate3d(0,0,0);
}

#box2 {
  background:#0f0;
}

.left {
  -webkit-transform: translate3d(0, 30px, 0);
  transform: translate3d(0, 30px, 0);
}

.right {
  -webkit-transform: translate3d(200px, 50px, 0);
  transform: translate3d(200px, 50px, 0);
}

JavaScript

var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');

box1.onclick = toggle;
box2.onclick = toggle;

var flag = false;
function toggle() {
  if (flag) {
    box1.className = "left";
    box2.className = "right";
  } else {
    box1.className = "right";
    box2.className = "left";
  }
  flag = !flag;
  document.getElementById('console').innerHTML = "Clicked " + this.id;
}