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中的文本，但跳跃文本是浏览器呈现的大小。

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

2 个答案: