为啥 twitter 在调整大小时会在 Google Chrome 上启动“打嗝”？

Posted 2023-03-06

【中文标题】为啥 twitter 在调整大小时会在 Google Chrome 上启动“打嗝”？

【英文标题】：Why does twitter bootstrap "hiccup" on Google Chrome when resizing?为什么 twitter 在调整大小时会在 Google Chrome 上启动“打嗝”？

【发布时间】：2012-07-17 05:57:13

【问题描述】：

当我注意到 Twitter Bootstrap 页面在某些情况下似乎“使 google chrome 失败”时，我正在通过更改我的 Google Chrome 窗口大小来使用自适应 CSS。

复制步骤（从台式计算机）：

从空白的 Google Chrome 标签页开始，全屏 访问http://twitter.github.com/bootstrap/ 逐渐缩小窗口，每 100 像素左右松开鼠标。 继续直到获得“完全移动版本”，大约 400 像素（蓝色的“在 github 上查看项目”按钮位于白色“下载引导程序”按钮的顶部，它们都是全角的）。 现在再次使窗口变厚，每 20 个像素左右让鼠标移动一次。

在执行第 4 步或第 5 步时，您可能会遇到奇怪的行为 - Chrome 对尺寸感到困惑，或者忘记绘制页面的垂直区域（呈现为白色）。在极少数情况下，我还设法获得了“幻像侧窗格”。

我在两台不同的计算机上尝试过，但仍然遇到同样的问题（都使用 Ubuntu 12）

问题是，其他响应式网站没有这个问题。参见例如 http://css-tricks.com/ 。你可以随心所欲地改变它的大小，Chrome 渲染它拥有的多个布局从来没有任何问题（事实上，它的布局比 twitter bootstrap 还多）。

所以我只能得出结论，这个问题是 twitter-bootstrap 特有的。可能与 CSS 规则或 html 内容的编写方式有关，或者可能与文件的结构方式有关。

我正在使用 twitter bootstrap 作为我的一个网站的基础，我想解决这个问题。有人对如何进行有任何想法吗？

【问题讨论】：

我在引导站点上没有这个问题。我知道我有时会在其他网站上这样做。通常它是“较重”的。阴影、不透明度、3D 变换和边界半径往往会增加机会。此外，我在速度较慢的家用 iMac 上比在工作速度更快的 iMac 上注意到的更多。

这并不重要。我也遇到过。在 iPad、iPhone 或 iMac 上使用我的网站从未遇到过问题。

不确定我的机器 (Chrome/Win7) 上是否有任何严重错误。我到底在寻找什么？按钮在某个像素范围之间不能完美地调整大小（全宽）是我唯一能看到的。

看来这可能是一个特定于 ubuntu 的问题。我在其他设备上测试过，无法重现。

我在使用 Bootstrap 构建的网站上也看到了这种行为，但仅限于我的 Ubuntu 平台。这很烦人，但可以通过打开重新呈现页面的开发控制台来“修复”。

【参考方案1】：

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

Link to the Github Issue

【讨论】：

还是有问题。我正在使用 ubuntu 12.04。这只是ubuntu的问题吗？？？？为了显示没有问题的屏幕，我发布了一个答案。