旋转div的Chrome悬停问题

Question

这里有jsfiddle来说明问题。当您将鼠标悬停在数字4的红色框上时，Chrome中会显示不一致的结果。当鼠标光标靠近框的左边缘时，获得焦点的实际元素是4框下方的元素。当鼠标光标靠近框的右边缘时，悬停按预期工作。在Firefox中运行良好。

三个问题：

1. 为什么会这样？
2. 这是一个错误还是一个功能？ ;）
3. 如何解决这个问题？

HTML

<div class="wrap">
<section>
  <div class="page flipped" style="z-index: 30;">
      <figure class="front">1</figure>
      <figure class="back">2</figure>
  </div>
  <div class="page flipped" style="z-index: 31;">
      <figure class="front">3</figure>
      <figure class="back">4</figure>
  </div>
  <div class="page" style="z-index: 1;">
    <figure class="front">5</figure>
    <figure class="back">6</figure>
  </div>
</section>
</div>

CSS

.wrap { width: 400px; margin-left: auto; margin-right: auto; }
section {
    width: 200px;
    height: 200px;
    background-color: green;
    margin-left: 200px;
    position: relative;
    height: 200px;
}
.page {
    width: 100%;
    height: 100%;
    font-size: 48px;
    text-align: center;
    color: white;
    position: absolute;
    transform-style: preserve-3d;
    transform-origin: left center;
}

.page.flipped { transform: rotateY( -180deg ); }

.page.flipped:hover { padding-top: 20px; }

figure {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  margin: 0;
  backface-visibility: hidden;
}

figure.front { background-color: blue; }
figure.back {
    background-color: pink;
    transform: rotateY( 180deg );
}

.page:nth-child(2) figure.back {
    background-color: red;
}

插图



这是有趣的观察：

如果我删除了第一个.page（下面的那个z-index: 30），那么它工作正常，旋转的div为它的整个区域获取悬停事件，不仅正确侧。 jsFiddle example

但如果我将.page.flipped轮换从-180更改为-179度，那么当我将光标从左向右移动到红色框上时会发生一些疯狂的事情 - 它会跳起来一直都在下来。 Another jsFiddle为此。

Answer 1

显然这是Chrome中的一个错误。它已在 38.0.2125.101 版本中修复。

在我设置.page.flipped轮换到-181deg的Chrome版本中，我也解决了这个问题。但是这个技巧在v37.0.2062.120上根本不起作用。这个甚至没有在旋转-181deg的元素上发起悬停事件。

删除backface-visibility: hidden对我来说不是一个选项，因为它会在动画期间导致闪烁。