Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
jjlharrison opened this issue Aug 16, 2013 · 15 comments
Open

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

jjlharrison opened this issue Aug 16, 2013 · 15 comments

Comments

@jjlharrison
Copy link

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
Copy link

coliff commented Aug 28, 2013

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
Copy link

mt33 commented Sep 6, 2013

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.

image

@Iuriy-Budnikov
Copy link

I have the same problem.

@mt33
Copy link

mt33 commented Sep 17, 2013

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

@auginator
Copy link

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
Copy link

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
Copy link

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
Copy link

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
Copy link

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
Copy link

mt33 commented Sep 20, 2013

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

@emcpadden
Copy link

@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
Copy link

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
Copy link

coliff commented Oct 16, 2013

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
Copy link

@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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants