使用 jQuery 为宽度设置动画时出现奇怪的“抖动”效果（仅在 Chrome 中！）答案

【问题标题】：Odd "shaking" effect when animating width with jQuery (only in Chrome!)使用 jQuery 为宽度设置动画时出现奇怪的“抖动”效果（仅在 Chrome 中！）
【发布时间】：2012-08-01 14:29:11
【问题描述】：

我在简单的 sn-p 代码中使用 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 制作过很多东西，但从未见过这种行为。是否有任何解释为什么会发生以及如何解决它？我想知道是不是因为我已经将元素浮动到了右边并且动画到了左边。该错误令人抓狂，并且极大地影响了整体演示（至少对我而言）。其他人以前见过这个吗？

编辑澄清：“颤抖”的不是实际的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 引擎中的一个错误，我们对此无能为力。

【问题讨论】：

我没有看到这种行为。也许当我尝试时它更温暖？
虽然我无法重现，但这听起来像是像素舍入错误。但是我只看到当您在一个方向上为元素的一个边缘设置动画时会发生这种情况，并通过以相反的方式对其进行动画处理来补偿内容位置......
我已经将test case here 与 2 个示例放在一起 - 在其中一个示例中，动画持续时间超出了 1 毫秒，这将导致一些不稳定的像素疯狂，第二个持续时间是相同的，所以（理论上) 应该没有晃动。你能在你的 Chrome 上给他们做个测试吗？
这是 Chrome 中的一个错误！！！！ success.jpg 他们搞砸了一些事情。看来我毕竟没有疯。所以有人想提交错误报告还是我应该提交？克里斯弗朗西斯，我想你有 dibs。
哈哈，是的，我肯定在它上面。将尝试创建与您的站点类似的可重现测试用例 - 我的 JSFiddle 带有故意的像素舍入错误实际上在新更新中效果更好......：/

标签： javascript jquery google-chrome animation html-lists

【解决方案1】：

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

更多信息可以在这里找到：CSS3 transform rotate causing 1px shift in Chrome

希望对你有帮助

【讨论】：

这成功了，谢谢！在应用了过渡的盒子阴影悬停效果之后有水平的剩余线条（伪影）。

【解决方案2】：

我更改了您的 css：ul.nav li a，将 float: right 添加到它并修复抖动。

无论如何，如果有帮助，我在使用 height:auto 为另一个 div 中的 div 的高度设置动画时遇到了同样的问题。将高度更改为固定宽度即可解决。

希望对你有帮助。

【讨论】：

【解决方案3】：

这似乎是 Chrome 版本 21.0.1180.60 中的错误，也可能存在于其他版本中。此处的代码没有任何问题，我想我们只是将其留给解决方法或现在提交错误报告。

叹息。

【讨论】：

好的，我已经提交了 Chromium 错误报告 - 如果您有兴趣，可以track it here！ :)
太棒了！我一定会追踪的。
哇，感谢您填写错误报告，这是一个大问题，:( 我的一些动画表现得很奇怪 :(
+1，一个以前运行良好的动画，在包括 webkit 'brother' Safari 在内的所有其他浏览器中仍然运行良好，现在只是有奇怪的颤抖效果。

【解决方案4】：

当 CSS 过渡应用于父标签时，抖动 SVG 也有类似的问题。我尝试随机应用所有可以使用的东西，而这个修复终于有所帮助：

svg {
  transform: translate3d(0, 0, 0);
}

【讨论】：

这为我解决了问题。我有<img src="mysvg.svg"> 和应用transform: translate3d(0, 0, 0); 解决了抖动问题。

【解决方案5】：

当我尝试为其中的另一个 div 设置动画时，一些divs 出现了这个问题。我注意到的是，如果 div 或元素具有 css 属性display:inline-block，就会发生这种情况。使元素浮动可以解决问题，但在我的情况下需要inline-block。

我注意到该元素还具有vertical-align:middle css 属性。将其更改为vertical-align:text-bottom 解决了这个问题。 Chrome v23 中不再有抖动效果（可能是新版本中仍然存在该错误）。

【讨论】：