Crashes Chrome on resize

[bobbyearl]

See video: http://www.youtube.com/watch?v=Eog8WIGH5h8

Chrome version: 21.0.1180.75 m

Windows 7 64-bit SP1

[jeroenvisser101]

Is this bug also occuring on other sites, or are you only seeing this on bootstrap docs page?

[bobbyearl]

I first noticed it on an internal project and thought it was something I was doing. Doing a quick run through shows these sites also exhibit it:

• http://twitter.github.com/bootstrap/examples/hero.html
• http://twitter.github.com/bootstrap/examples/fluid.html
• http://builtwithbootstrap.com/
• http://www.vendsoft.com/

This example seems to work fine, however:

• http://twitter.github.com/bootstrap/examples/starter-template.html

[jeroenvisser101]

As your video shows, it's probably the fluid-less (as it is not so fluid in your browser, plus it is written in less) that's causing the problem. I tested the problem on Mac OS X 10.8.0, and none of the problems you're describing occurred, so it might just be a Chrome issue? Have you tried other browsers yet?

[bobbyearl]

Tested in latest version of IE, FF, Safari and Chrome on Windows 7. Tested in latest version of FF, Safari and Chrome on OSX 10.8. Only able to reproduce the problem (on different Windows 7 machines) in the 21.0.1180.75 m version of Chrome.

Coworkers had previous builds without the lockup - updated Chrome and problem shows up.

[jeroenvisser101]

Could you try using Chrome Canary?

[sitesense]

I have had the same issue using Win7 and the current Chrome (21.0.1180.60 m) on a site I'm developing at the moment.
Using fluid with straight css, no mods and no 'Less'. Not only does it seem to crash Chrome, but it hijacks the cursor keeping it in 'resize' mode and you can't click on anything. Guess this is a Chrome issue.

[philwood]

The problem seems to lie on line 92 of bootstrap-responsive.css.
Remove
-webkit-transform: translate3d(0, 0, 0);
Does this work for anyone else?

[sitesense]

@ Odaku128
Good find, that does seem to work for me, with the added side-effect that resizing seems much smoother with less pronounced jittering.

[jeroenvisser101]

@Odaku128 Indeed a good find +1 for removing this from Bootstrap

[mdo]

Chrome crashing on a CSS property isn't something we'll try to fix. For now, we'll leave this to Chrome to fix.

[fshost]

This issue results in chrome consistently locking up the client hardware due to the use of a vendor-prefixed non-standardized property known to be buggy. The effort to correct the behavior seems to be minimal, and the effect of this issue is not a minor one. I had to manually shut-down the power on my laptop and throw windows into recovery mode because of this issue causing the OS to become completely unresponsive. I can't control what browser my clients use. I can control the tools and features I use in development. I like bootstrap but can't seriously consider using it for production nor can I see how anyone else could. You may want to reconsider fixing this. Or is bootstrap not meant to be considered production-suitable? If so, my bad, I just assumed it was.

[zaziork]

I concur with fshost as regards the case for providing provide a fix, or at least for including a note in the documentation as to how to apply a fix.
I experienced a very similar issue using Chrome (Version 22.0.1229.56 beta). When resizing the browser, I get flickering of the browser display, then a blank, white screen. Upon maximising, the page display reappears, but is restricted to a column on the left of the screen (around a fifth of the screen width). This column has a vertical scroll bar. This screwed up layout remains, even when the page is refreshed. Commenting out the CSS in bootstrap-responsive.css that Odaku128 suggested solves the problem, in as far as the error I encountered at least:
-webkit-transform: translate3d(0, 0, 0);

[josteinaj]

I'm having a similar (probably the same) issue where the width of the display area including the vertical scroll bar locks up and I get a white area to the right of the scrollbar when I resize it. I'm on Chromium Version 22.0.1229.94 Ubuntu 12.10 (161065). Here's a screenshot: http://imgur.com/Kw6dX

Odaku128s solution worked for me too.

[Smerity]

I just want to note, the failed resize resulting the majority of the screen being white still occurs with the most recent Google Chrome (Version 24.0.1312.57).

The fix suggested by @Odaku128s works for me as well.

[crshumate]

I've seen this issue for a while now since we use bootstrap for all our projects. I had thought maybe it was a plugin causing the crash. After seeing this thread however glad to know it was not just my browser.

As a developer this is VERY annoying since I have to repeatedly force quite Chrome when it locks up while testing various screen widths for layout/design conformity.