Question

我遇到的问题只会影响Chrome。此外，它仅在屏幕处于特定宽度时才可见。

我创造了一个可以复制问题的小提琴。

当您翻转红色框时，父动画的宽度会动画显示更多红色框。

在看到摆动之前，您可能需要多次调整html窗格的宽度，

有关如何最好地解决此问题的任何想法？

由于

Answer 1

使用float:right代替绝对定位。

之所以发生这种情况，是因为当你改变宽度时，它会向右延伸 - 然后它会被重新转回并向左移动到正确的位置，从而导致摆动。将它浮动到右侧始终保持在那里。

澄清一下：你需要在#widget和.hidden上替换position：absolute width float：right以获得正确的结果。

Answer 2

如果你使用职位，你需要使用left和top，在这种情况下，它是无用的。尝试以这种方式解决你的问题

#wrapper{
    width: 100%;  // was 600px
    height: 100px;
    margin: 0 auto;
    //position: relative; 
}