javascript - 使用 jQuery 动画宽度时出现奇怪的 "shaking"效果(仅在 Chrome 中!)

Question

我在一个简单的代码片段中使用 jQuery 为 li 元素的宽度设置动画。我使用 hover() 作为处理程序，使用 .animate() 来设置宽度动画。这是我的代码。

$('li').each(function() {
    //store the original width of the element in a variable
    var oldWidth = $(this).width();
    $(this).hover(
        function() {
            //when the mouse enters the element, animate width to 900px
            $(this).animate({width: '900px'}, 600, 'linear')
        },
    function() {
            //when the mouse leaves, animate back to the original width
            $(this).animate({width: oldWidth}, 350, 'linear')
        }
   );
}); 

代码真的非常简单并且可以工作但是在 Chrome 中有一个非常奇怪的怪癖。当元素进出动画时，li 元素“颤抖”，就好像它们真的很冷并且在发抖。您可以在此处的实时示例中看到该行为:http://missmd.org/ (编辑:错误现已修复)

我以前用 jQuery 制作过很多东西，但从未见过这种行为。是否有任何解释为什么会发生以及我如何解决它？我想知道是否是因为我将元素向右浮动并向左设置动画。这个 bug 令人抓狂，并且极大地影响了整体演示(至少对我而言)。其他人以前见过这个吗？

编辑以澄清:并不是真正的 li 元素“颤抖”，而是其中的文本随着动画从左到右快速地轻微但明显地抖动运行。我很难过。

编辑二:在稍微修改了 CSS 之后，我现在只能在 Chrome(对我来说是 21.0.1180.60 beta-m)中重现效果。在 Firefox 中，它按预期工作。它在 IE 中也很好用。非常具有讽刺意味的是，Chrome(通常非常适合这些东西)现在给我带来了麻烦。 拉出头发，检查理智

这是我的 HTML 代码，可以帮助您深入了解这个问题。我们在 ChrisFrancis 的 jsFiddle 中重现了这个问题。

<nav>
    <ul class="nav">
        <li class="one">
            <a href="homeandnews/">
                <span class="title">Home and News</span>
                <br/>
                <span class="subtitle">Learn more about me and read general updates!</span>
            </a>
        </li>
    </ul>
<nav>

我完全被难住了。这也可能是 Chrome/V8 JS 引擎中的一个错误，我们对此无能为力。

Answer 1

我也在关注这个问题，这个:-webkit-backface-visibility: hidden; 解决了我的问题。我在 SVG 上使用 CSS3 变换时添加了这种奇怪的抖动。

可在此处找到更多信息:CSS3 transform rotate causing 1px shift in Chrome

希望对你有帮助