2

背景：

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

问题

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

问题/我尝试过的

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

4

1 回答 1

1

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

html {
    overflow-y: scroll; 
}

这是添加了上述代码段的示例：http: //jsfiddle.net/joshnh/8XW4v/show

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

于 2012-09-11T05:32:48.150 回答