Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does twitter bootstrap "hiccup" on Google Chrome when resizing?

I was playing with adaptative CSS by changing my Google Chrome window size when I noticed that the Twitter Bootstrap page seems to "make google chrome fail" on certain occasions.

Steps to reproduce (from a desktop computer):

  1. Start with a blank Google Chrome tab, full screen
  2. Visit http://twitter.github.com/bootstrap/
  3. Gradually make the window narrower, letting go the mouse every 100 pixels or so.
  4. Keep going until you get the "totally mobile version", at around 400px (The blue "View project on github" button is on top of the white "Download Bootstrap" button, and they are both full-width).
  5. Now make the window thick again, letting the mouse go after every 20 pixels or so.

Chances are that you will get weird behaviour while doing steps 4 or 5 - Chrome gets confused about the sizes, or forgets to draw a vertical region of the page (which is rendered white). I've also managed to get a "phantom side pane" in some rare occasions.

I've tried in two different computers, and I still get the same issues (both using Ubuntu 12)

The thing is, other responsive sites don't have this issue. See for example http://css-tricks.com/ . You can change its size all you want, and Chrome never has any trouble rendering the multiple layouts it has (in fact, it has more layouts than twitter bootstrap).

So I can only conclude that this problem is twitter-bootstrap-specific. Probably related with the way the CSS rules or HTML content is written, or maybe related with the way files are structured.

I'm using twitter bootstrap as a base for one of my sites, and I'd like to solve this issue. Does anyone have any ideas on how to proceed?

like image 735
kikito Avatar asked Jul 18 '12 08:07

kikito


Video Answer


1 Answers

If you believe this is bootstrap-specific this should be posted to the Twitter Bootstrap Github Pages instead of SO. However, I've been participating in an issue ticket reg. this which was closed after we pointed out that we're unable to reproduce the error on both Chrome / OS X and Chrome / Win 7 with the same browser build as the OP. This suggest that this is a platform specific chrome-error rather than a problem with the Bootstrap toolkit. With that said, I'd raise a ticket with the chrome team including your build # and OS/Platform setup.

Link to the Github Issue

like image 129
simme Avatar answered Sep 19 '22 08:09

simme