背景:
我正在尝试使用媒体查询和 CSS3 转换在我网站的各种演示文稿之间顺利过渡。到目前为止，一切似乎都很顺利，但是，在包含垂直滚动条 和不包含 的演示文稿之间转换时，我遇到了麻烦。我认为通过媒体查询更改网站宽度是很常见的，所以当 Stack 上没有关于此的任何内容时，我感到很惊讶。
问题
当过渡导致垂直滚动条的存在或不存在发生变化时，Webkit 浏览器似乎进入无限循环/闪烁。 Here is a demo 的行为..要触发它，只需在 Chrome 或 Safari PC 中将窗口的大小缓慢调整到 700 像素宽标记附近。
问题/我试过什么
我想知道 Webkit 的解决方法是什么？ Firefox 没有问题。我试过移除缓动和更快的过渡(不是首选)。我意识到我可以简单地删除垂直过渡并简单地过渡宽度，但是，对我的设计来说，同时过渡高度和宽度很重要。
最佳答案
我认为最简单的解决方案是强制滚动条始终存在。最简单的方法是使用这个小片段:
html {
overflow-y: scroll;
}
这是添加了上述代码段的示例:http://jsfiddle.net/joshnh/8XW4v/show
我不确定它是否是一个 webkit 错误，因为如果你仔细想想，这是预期的行为(这很奇怪，Firefox 做了一件聪明的事情来确保它不会发生)。基本上，当媒体查询开始时，元素缩小，父元素不再需要滚动条。这样做的问题是，一旦滚动条消失，由于现在可用的额外像素很少，媒体查询就不再相关。所以对象再次增长，父级带回滚动条，再次启动媒体查询，等等......
关于css - 如何在 Webkit 中使用 CSS3 过渡和垂直滚动条避免无限循环？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12363172/