Twitter Bootstrapページが特定の状況で「Google Chromeを失敗させる」ように見えることに気付いたとき、Google Chromeウィンドウサイズを変更して適応型CSSで遊んでいました。
再現手順 (デスクトップ コンピューターから):
- 空白の Google Chrome タブ、全画面表示から開始します
- http://twitter.github.com/bootstrap/ にアクセスしてください
- ウィンドウを徐々に狭くし、100 ピクセルごとにマウスを離します。
- 約 400px の「完全モバイル バージョン」が表示されるまで続けます (青色の [GitHub でプロジェクトを表示] ボタンが白色の [Bootstrap をダウンロード] ボタンの上にあり、両方とも全幅です)。
- ここで、ウィンドウを再び厚くし、20 ピクセルごとにマウスを動かします。
手順 4 または 5 を実行しているときに、おかしな動作が発生する可能性があります。Chrome がサイズについて混乱したり、ページの垂直領域 (白でレンダリングされる) を描画するのを忘れたりします。また、まれに「ファントムサイドペイン」を取得することもできました.
2 台の異なるコンピューターで試しましたが、まだ同じ問題が発生します (どちらも Ubuntu 12 を使用)。
問題は、他のレスポンシブ サイトにはこの問題がないということです。たとえば、http://css-tricks.com/を参照してください。サイズは自由に変更でき、Chrome は複数のレイアウトを問題なくレンダリングできます (実際には、Twitter のブートストラップよりも多くのレイアウトがあります)。
したがって、この問題は twitter-bootstrap 固有のものであるとしか言えません。おそらく、CSS ルールまたは HTML コンテンツの記述方法に関連しているか、ファイルの構造に関連している可能性があります。
私は自分のサイトの 1 つのベースとして Twitter ブートストラップを使用していますが、この問題を解決したいと考えています。続行する方法について誰かアイデアがありますか?