Question

我正在构建一个相当复杂的UI小部件，在Chrome中存在一些问题。我能够隔离问题并在http://jsfiddle.net/8Kb3B/

展示它

我在div内有td，我正在尝试使用jQuery的.animate()来切换div。 Chrome中发生的情况是td在div恢复到原始宽度时不会重新生长。此外，如果你密切注意“隐藏”动画的结束，你会发现td的宽度在div的内容宽度处短暂闪烁，我发现怪异。

使用.toggle(delay)时会发生同样的事情。如果我毫不拖延地使用.toggle()，整个过程就会按预期工作。

动画可以在Mozilla的产品中正常运行，甚至可以在IE中使用。

我在这里错过了一些非常简单的东西吗？

Answer 1

我尝试从我身边可能会帮助你。对于基于webkit的浏览器，这样写：

@media screen and (-webkit-min-device-pixel-ratio:0) {
    td {
    padding-right:2px;
    }
    span{
    left:5px;
    position:absolute;
    }
    #content {
    border: 2px solid red;
    width: 100px;
    height:20px;
    display:table;
    overflow:hidden;
    position:relative;
   }
}

选中此项以获取更多http://jsfiddle.net/8Kb3B/3/

在td内设置div的动画会导致Chrome中出现不稳定的行为

1 个答案: