为什么调整大小时推特引导程序在谷歌浏览器上"hiccup"?



当我注意到推特引导页面在某些情况下似乎"使谷歌Chrome失败"时,我正在通过更改谷歌Chrome窗口大小来玩自适应CSS。

复制步骤(从台式计算机):

  1. 从一个空白的谷歌Chrome标签开始,全屏
  2. 访问http://twitter.github.com/bootstrap/
  3. 逐渐缩小窗口,每100个像素左右放开鼠标一次
  4. 继续,直到你得到"完全移动版本",大约400px(蓝色的"在github上查看项目"按钮在白色的"下载引导程序"按钮的顶部,它们都是全宽的)
  5. 现在,使窗口再次变厚,让鼠标每20个像素左右移动一次

在执行第4步或第5步时,你可能会有奇怪的行为——Chrome会对大小感到困惑,或者忘记绘制页面的垂直区域(呈现为白色)。在一些罕见的情况下,我也设法得到了一个"幻影侧窗格"。

我在两台不同的电脑上尝试过,但仍然遇到相同的问题(都使用Ubuntu 12)

问题是,其他响应网站没有这个问题。请参见示例http://css-tricks.com/。你可以随心所欲地改变它的大小,Chrome在呈现它的多个布局时永远不会有任何问题(事实上,它的布局比twitter引导程序更多)。

所以我只能得出结论,这个问题是twitter引导程序特有的。可能与CSS规则或HTML内容的编写方式有关,也可能与文件的结构方式有关。

我正在使用twitter引导程序作为我的一个网站的基础,我想解决这个问题。有人对如何进行有什么想法吗?

如果你认为这是特定于引导程序的,应该将其发布到Twitter引导程序Github页面,而不是SO。然而,我一直在参与一个问题票证注册。在我们指出我们无法在与OP相同的浏览器版本的Chrome/OS X和Chrome/Win 7上复制错误后,该注册被关闭。这表明这是一个特定于平台的chrome错误,而不是Bootstrap工具包的问题。话虽如此,我会向chrome团队提出一张罚单,包括您的构建#和操作系统/平台设置。

Github Issue 的链接

最新更新