使用.animate（{width：'hide'}）隐藏时，元素会在消失之前闪烁，但仅限于Chrome

Question

此问题出现在Chrome / Chromium上（在Linux和Windows上）：当我使用JQuery隐藏具有.animate({width: 'hide'})的元素时，元素会缩小，然后在几分之一秒内恢复到原始大小，然后消失了。

我做了一个小提琴：http://jsfiddle.net/FyDWE/4/

在IE9和Firefox上，一切都按预期工作。

提前致谢！

Answer 1

我无法使用解决方法（在必须使用width: 'hide'的情况下）但是当我编辑jQuery fx核心时，我能够找到我认为非常奇怪的浏览器错误在闪烁点返回。

这是jsfiddle：

http://jsfiddle.net/FyDWE/9/

当您离开鼠标时，动画将开始缩小，并在它到达结束时突然调整为完整。现在这是你的闪烁源，它因为jQuery编辑而停在那里。

如果您现在编辑正在设置动画的.options span element的样式属性，则可以看到它具有display: inline-block; overflow-x: hidden; overflow-y: hidden; width: 0px;

现在，如果您将width更改为1px，（display: inline-block; overflow-x: hidden; overflow-y: hidden; width: 1px;），它会突然完全缩小。

所以我认为闪烁来自于：动画达到0px，这意味着铬的突然全尺寸，如上面的jsfiddle所示，然后元素隐藏。当您在IE9中尝试链接的jsfiddle时，即使有宽度，闪烁冻结状态也是正常的：0px没有像chrome那样的黑条。

编辑：

以下是我使用width: 'hide'解决方案中的错误的解决方法是可行的：

http://jsfiddle.net/FyDWE/10/