如何在 Webkit 中使用 CSS3 过渡和垂直滚动条避免无限循环？答案

【问题标题】：How to avoid infinite loop with CSS3 transition and vertical scroll-bar in Webkit?如何在 Webkit 中使用 CSS3 过渡和垂直滚动条避免无限循环？
【发布时间】：2012-09-03 23:56:25
【问题描述】：

背景：

我正在尝试使用媒体查询和 CSS3 过渡在我的网站的各种演示文稿之间平滑过渡。到目前为止，一切似乎都很糟糕，但是，我在包含垂直滚动条和不包含垂直滚动条的演示文稿之间切换时遇到了障碍。我认为使用媒体查询来改变网站宽度是很常见的，所以当 Stack 上没有关于此的任何消息时，我感到很惊讶。

问题

当转换导致垂直滚动条的存在或不存在发生变化时，Webkit 浏览器似乎进入了无限循环/闪烁。 Here is a demo 的行为.. 要触发它，只需在 Chrome 或 Safari PC 中将窗口的大小慢慢调整到 700px 宽标记附近。

问题/我尝试了什么

我想知道 Webkit 的解决方法是什么？ Firefox 没有问题。我已经尝试过消除缓和并更快地过渡（不是首选）。我意识到我可以简单地移除垂直过渡并简单地过渡宽度，但是，对我的设计来说，同时过渡高度和宽度是很重要的。

【问题讨论】：

感谢@ViralShah 的链接，但是，它似乎不相关。他们正在谈论实现与背景位置的无限循环。他遇到的闪烁和我的不一样。

标签： css webkit responsive-design media-queries css-transitions

【解决方案1】：

我认为最简单的解决方案是强制滚动条始终存在。最简单的方法是使用这个小 sn-p：

html {
    overflow-y: scroll; 
}

这是添加了上述 sn-p 的示例：http://jsfiddle.net/joshnh/8XW4v/show

我不确定这是否是一个 webkit 错误，因为如果你仔细想想，这是预期的行为（这很奇怪，Firefox 做了一件聪明的事来确保它不会发生）。基本上，当媒体查询开始时，元素会缩小，父元素不再需要滚动条。这样做的问题是，一旦滚动条消失，媒体查询就不再相关，因为现在可用的额外像素很少。所以对象再次增长，父级带回滚动条，再次启动媒体查询，等等......

【讨论】：

简洁优雅。非常感谢！