I played with responsive CSS by resizing the Google Chrome window when I noticed that the Twitter Bootstrap page seems to "make google chrome fail" in certain cases.
Steps to play (from a desktop computer):
- Start with a blank Google Chrome tab in full screen mode
- Visit http://twitter.github.com/bootstrap/
- Gradually narrow the window by releasing the mouse every 100 pixels.
- Continue until you get a "fully mobile version" of about 400 pixels in size (the blue button "View project on github" is located above the white button "Download Bootstrap" and they are full).
- Now make the window thick so the mouse lasts every 20 pixels or so.
Most likely, you will get strange behavior when performing steps 4 or 5 - Chrome got confused in size or forgot to draw a vertical area of the page (which is white). I also managed to get a "phantom sidebar" in some rare cases.
I tried on two different computers and I am still having the same problems (both using Ubuntu 12)
The fact is that on other responsive sites this problem is not. See for example http://css-tricks.com/ . You can resize whatever you want, and Chrome never has problems displaying multiple layouts (in fact, it has more layouts than a boot boot).
Therefore, I can only conclude that this problem is specific to twitter-bootstrap. Probably related to how CSS rules or HTML content are written, or possibly related to how files are structured.
I use twitter bootstrap as the base for one of my sites, and I would like to solve this problem. Does anyone have any ideas on how to proceed?
source share