div的CSS3变换比例导致Firefox中的跳跃子元素

Question

我试图在CSS3中扩展一个元素.此元素具有子元素,可在动画完成时跳转.这似乎只发生在Firefox中.我一直在尝试在SO上找到很多修复,但是他们似乎都没有做到这一点.

我的HTML设置:

<div>
<ul>
  <li class="appcenter-menu-item focus">
    <a href="#/sp">
      <div class="icon"></div>
        <label>First item</label>
    </a>
  </li>
  <li class="appcenter-menu-item focus">
    <a href="#/pep">
      <div class="icon"></div>
      <label>Second item</label>
    </a>
  </li>
    <li class="appcenter-menu-item focus">
      <a href="#/hp">
        <div class="icon"></div>
        <label>Third Item</label>
      </a>
    </li>
</ul>
</div>

悬停过渡:

.focus {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.focus:hover {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    transform: scale(1.1);
}

我创建了一个显示完整设置的jsfiddle:

http://jsfiddle.net/kwhq2z4t/3/

更新

我在Windows 7 x64上使用FireFox版本32.0.1.

Answer 1

刚刚在Firefox中遇到了这个"跳转后完成"错误.

在一些摆弄之后,添加-moz-transform-style: preserve-3d;到动画元素的父容器 - 将其添加到初始状态(转换发生之前的非动画状态 - 这样只是.focus类) - 为我完成了这项工作.

Answer 2

我设法找到解决此类问题的唯一方法是：

-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;
backface-visibility:         hidden;

不过，在缩放过程中，它似乎对 Firefox 和 Safari 中的文本没有帮助，跳跃文本是浏览器呈现的大小。