IE7 crash with box-sizing-polyfill and respond.js

[jjlharrison]

I'm working with a Bootstrap 3 site that needs to support IE 7. It seems that if I include both respond.js with the polyfill I see IE using 100% CPU and ever increasing amounts of memory.

If I exclude either one of the scripts the issue doesn't occur.

Does anyone have any idea what might be happening?

Thanks.

[coliff]

The Bootstrap 3 ZIP had older versions of respond.js and the html5shiv (this will reportedly be updated in Bootstrap 3.0.1).

In meantime be sure to update those to the latest versions. (Respond.js v1.3.0 and HTML5 Shiv v3.6.2). I'm not sure if that'll fix the issue you're experiencing, but recommend updating all the same. I'm using the latest versions and the box-sizing-polyfill and it seems to be working okay.

[mt33]

I'm having the same issue, took me the greater part of the day to identify it. This only happens in IE7 in standalone mode, not in IE10 with Developer Tools. I've got the latest HTML5Shiv and respond.js and the CPU is still pegging at 100% and memory is leaking faster than my first apartment's shower head (~ 1MB/s)

Site looks great, but the browser becomes unresponsive and starts crashing.

[Iuriy-Budnikov]

I have the same problem.

[mt33]

On Windows XP SP3 with IE8.0.6001.18702, I get the same behavior: CPU goes to near ~100% and memory leaks,

[auginator]

I am having the same exact problem on a site using bootstrap 3. Layout looks great - but the browser stops responding after a while.

[emcpadden]

I needed the CssWizardryGrid to work on IE7 so I tried this so I tried this polyfill. I had a similar experience to what the rest of you are experiencing. In my case, the grid system is using all percent based widths and I had nested grids so the polyfill was firing a lot. I created my own polyfill using much of the code in this polyfill and was able to get the CssWizardryGrid to work great in IE7. It might give you some ideas on how you might solve the problems you are encountering. In my case, it was to target my situation to make sure that updates were only happening once. Check it out at: https://github.com/emcpadden/csswizardry-grids-ie7-polyfill

[joshangell]

You absolute hero, literally saved my ass. There should be a beer buying button somewhere!

And just to confirm, I used it with the old float based grid system and it worked fine.

[emcpadden]

Cool! I'm glad that helped. I struggled for a couple days trying to find a solution because I needed a solution that would work in IE7 and I think the CssWizardyGrid is brilliant (and Inuit for that matter). I am using this stuff as inspiration for an internal UI framework that I'd like to for our company globally for all our web applications (which are all quite big). So I'll take that virtual beer and send it along to Harry Roberts @csswizardry! :)

[joshangell]

Sweet, yeah we have a small UI framework sitting on top of inuit that we use for all our stuff, its definitely made life a whole lot easier!

[mt33]

I'm unsure as to how to apply the @emcpadden's polyfill to work with Bootstrap... anyone figure this out?

[emcpadden]

@mt33 sorry to say, this polyfill was written for the inuit grid system and the CssWizardryGrid, I'm sure it won't work for Bootstrap, at least the way it is currently written. You might be able to modify my polyfill to make it work with bootstrap because it is probably solving a similar problem. Basically, I saw that when I tried to use this box-sizing-polyfill as is, it was really performing badly because of all the resize calls that were getting made mainly because this polyfill is trying to reset all of the widths for elements everytime the window size changes and since all of the widths in my case were percentage based, this was causing a lot of resizes because one resized element could effect the layout of another element which could cause it to resize again trigger more resizes. Since in the case of the inuit grid, I knew which elements were getting resized so my polyfill doesn't have to be as generic as this one.

What I did was to look for the top level grid elements and resize them first then after that resize the child elements recursively. This way I was only resizing the elements once and since I already resized the parent element, I knew that resizing the child element was not going to effect the parent width. I'm not as familiar with the Bootstrap grid, but I think you might be able to do a similar thing.

You might only need to touch lines 19, 36 and 382 to set the classes that Bootstrap uses. Although it looks like Bootstrap uses a lot more classes to specify a grid and a grid item then the inuit grid.

Good luck!!!

[damienalexandre]

With bootstrap3, respond.js and this behavior, IE7 was crashing / some strange behaviors were happening:

• blocks resizing / shrinking them-self for no reasons
• everything exploding on modal opening
• IE7 slow as hell, not responding

I just removed this line:

<attach event="onresize" for="window" onevent="update()" />

And now everything looks good. I lost the update on window resize but that's fine.

[coliff]

Check out the updated CSS for using Bootstrap 3 with IE7. It resolves the crashing issue with respond.js https://github.com/coliff/bootstrap-ie7

[ruidovisual]

@damienalexandre I thought it was something like that, but, I decided to google it first. Soooo... Thank you so much! That will work for me : )

[alexander-akait]

Respond.js create many style tag, and boxsizing.js recalculating this elements in infinity