Chrome 3D transform translateZ bug

dabblet.css

/**
 * Chrome 3D transform translateZ bug
 */


#env {
  width: 200px;
  height: 200px;
  border: 2px solid;
  -webkit-perspective: 1000;
}

#slider {
  -webkit-transform-style: preserve-3d;
  -webkit-transform: translateZ( 1001px );
}

#content {
  width: 200px;
  height: 200px;
  -webkit-transform: translateZ( -1001px );
}

#content a {
  display: block;
  height: 100%;
  background: blue;
  color: white;
  font-size: 40px;
  text-align: center;
  text-decoration: none;
}


#content a:hover {
  background: red;
  color: yellow;
}

dabblet.html

<p>Blue <code>&lt;a&gt;</code> tag should be hoverable &amp; clickable.<p>

<div id="env">
  <div id="slider">
    <div id="content">
      <a href="#">Hover & click me</a>
    </div>
  </div>
</div>

settings.json

{"view":"split-vertical","prefixfree":"","page":"css"}