【问题标题】：Chrome hover issue with rotated div旋转 div 的 Chrome 悬停问题
【发布时间】：2014-12-01 22:56:22
【问题描述】：

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

三个问题：

为什么会这样？
这是错误还是功能？ ;)
如何解决这个问题？

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 为此。

【问题讨论】：

观察：如果你删除backface-visibility: hidden;，悬停事件适用于整个区域

标签： css google-chrome

【解决方案1】：

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

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

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

【讨论】：