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

Already on GitHub? Sign in to your account

Can't use in IE8 #27

Closed
keld30 opened this Issue Jun 3, 2011 · 64 comments

Comments

Projects
None yet

keld30 commented Jun 3, 2011

I'm using the latest version of boilerplate html5 wich includes respond.js and in IE8 the browser just crashes after loading the page.
Removing it works (doesn't crash but of course media queries don't work either).
Any advice?

Thank you!

Owner

scottjehl commented Jun 3, 2011

Hmm okay... can you link me up to your css? Or drop it into a jsbin.com or something similar so I can take a look?

Do the respond.js unit tests crash your IE8 too? http://scottjehl.github.com/Respond/test/unit/

keld30 commented Jun 3, 2011

Yes the test works in Ie8
Here is my page, open in IE8 and the browser will crash right away:
http://www.graphikeld.com/mq/

CSS here: http://jsbin.com/owupe3/2/

Thanks!

Owner

scottjehl commented Jun 3, 2011

Looks like you've got a couple media queries in comments, but the parser doesn't make exceptions for that, so it could be throwing it off. Can you try removing those and see if it helps?

Thanks!

keld30 commented Jun 3, 2011

Just did (check the above url) and still crashes. Does it crash for you too?

keld30 commented Jun 3, 2011

I also see that in the comments it says:
"The closing /mediaquery comment is required by respond.js min/max-width Media Query polyfill"
But I don't see any closing comment in the original boilerplate stylesheet? Where should it go, could it be the issue?

Owner

scottjehl commented Jun 3, 2011

Hmm, no that's outdated. The updated docs are here https://github.com/scottjehl/Respond#readme but I may need to update the tests directory if that's where you saw that. (if not please file an issue)

Do you have any cases where you've got double-nested brackets ( @media { foo { foo { } } } in queries? sorry I can look again later on.

keld30 commented Jun 3, 2011

I saw this comment in Paul Irish's css, that's what I'm using for my site.
https://github.com/paulirish/html5-boilerplate/blob/master/css/style.css

and no I don't have any double-nested brackets...
Thanks for looking! :)

I'm experiencing an IE8 crash as well. Only on a certain version of IE8 though. Some versions seemed to be ok. The version that crashed was 8.0.6001.18702 and was running on WinXP.

I'm pretty sure it was affected in the latest update. I updated to the latest version (not sure of the previous version I was using) on Friday and users reported issues over the weekend.

What's strange is that it was only happening at certain pages within my site. The only thing that I can think that was different was background images on the body element (some pages have them, some don't). Will look into it more and report what I find. Thanks!

It's something to do with setting a background image:

This doesn't break:
http://home.donnierayjones.com/respond_break_test/nobreak.html

But this does:
http://home.donnierayjones.com/respond_break_test/break.html

And this (w/ external stylesheet as opposed to inline css) breaks:
http://home.donnierayjones.com/respond_break_test/break_w_stylesheet.html

keld30 commented Jun 6, 2011

wow thanks donnierayjones, removing the background image on the body, ie doesn't crash anymore, that's crazy, goood catch! but still when I resize my browser now, it never enters the mediaqueries, looks like it's ignoring them...

Owner

scottjehl commented Jun 7, 2011

wow, that is definitely a weird one. I can confirm the crash too.

I'll have to look into this further. The CSS above should really have no relation to respond.js...

Thanks for looking into it! Very weird!

Owner

scottjehl commented Jun 29, 2011

Can you check if the crash occurs when these changes are in place? #35

It might be related. thanks!

Did some quick tests and looks like it's still crashing on IE8.

danj commented Jul 19, 2011

I've been experiencing similar crashes without using respond.js, so I don't think it is the direct cause of this crash.
I've noticed that moving the style tag after the the script tag resolves Donnie's break example.

I am experiencing this issue in IE8 (version 8.0.6001.18702 in XP). It also seems to be affecting myself and other Modernizr users building with Respond.js (see Modernizr/Modernizr#332).

I don't have access right now to the machine that I was testing the crashing on IE8, but I used http://ipinfo.info/netrenderer/index.php to test.

I setup a new page, http://home.donnierayjones.com/respond_break_test/test.html that has the style tag under the script tag (as danj mentioned), and that does work!

Again, this testing was done with http://ipinfo.info/netrenderer/index.php, not me actually launching IE8 and observing.

When testing the pages that do break, this is the error I got back from the tester:

Error 105. Your web page has caused Internet Explorer to crash. Please do not abuse this service. To protect this service against abuse, we are continuously logging all requests and will take all necessary actions to stop vandalism.

So, try not to do too much testing of the crashing using that tester ;)

FWIW, in my testing on IE 8.0.6001.18702/XP this issue goes back as far as https://github.com/scottjehl/Respond/tree/b710d21f42084c66e5cbb53504bb7caf33544f6e and probably farther.

Also, after downloading and re-installing IE8, WinXP, 32-bit I discovered 8.0.6001.18702 is apparently the latest distributed release of IE8.

I'm experiencing this issue as well. Has anyone made progress on a fix? I could help with testing if necessary. (I have access to an IE 8 VM.)

I'm experiencing the same issue with IE8 and the background image. Any news on a potential fix yet?

EspadaV8 commented Sep 6, 2011

I can also confirm this crash (although I think that's pretty much covered now). I can also say that moving the script tag before any CSS fixes the issue.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" content="text/html"/>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>
    <link rel="stylesheet" media="screen" href="style.css" />
...

EspadaV8: After various fiddling with the CSS last last night it no longer seems to crash IE8, but not exactly sure what was causing it in the end.

Just remembered that I had to remove the background image to get this to work, so not really a resolution. Moving the JS above the CSS did not stop IE8 crashing for me.

barkan commented Sep 7, 2011

I've noticed that http://responsivewebdesign.com/robot/ which uses respond.js intermittently crashes IE8. Don't know if another test case helps.

I had this issue, and moving the background image from the body tag to the html tag seems to have solved it. Can anyone else confirm?

plockc commented Sep 15, 2011

removing comment posted in wrong place, sorry @LucisFerre

barkan commented Sep 15, 2011

I'll be out of the office and away from my computer all day Thursday, September 15. If you need immediate assistance, please contact Jim Rabon rabon@netapp.com.

@plockc Is this actually in respond.js? Can you submit a patch for this?

jafoca commented Sep 26, 2011

FYI - WooThemes is using this script in their new responsive WordPress theme called Buro. I ran into this bug as their theme uses a background image.

They have since fixed the bug by removing the image - unfortunately this doesn't help me as our design concept we are planning to implement using this theme relies on a full screen bg image...

Also @LucisFerre - I don't think that @plockc 's fix applies to the main respond.js file... I could not find the area he mentioned.

Owner

scottjehl commented Sep 26, 2011

jafoca,
Does it affect anything if you move the bg image to the HTML element instead?

On Sep 26, 2011, at 11:58 AM, jafoca wrote:

They have since fixed the bug by removing the image - unfortunately this doesn't help me as our design concept we are planning to implement using this theme relies on a full screen bg image...

jafoca commented Sep 26, 2011

Hmm. As of my last posting I had not patched my sites yet.

Now I have and their fix (removing the BG image) seems to be working on one test site but not my other, more customized version: http://outpost.bluesky120.webfactional.com/

In this case I have removed the BG from the body element - as woothemes did, with no success. I also tried moving the bg to the HTML element as you suggest and it still is crashing IE8 even after emptying caches.

Very odd bug.

jafoca commented Sep 27, 2011

Just to confirm, this is not a fix for the bg image crashing IE8 when used with respond.js, but a fix for developing a child theme to Buro - the wootheme that is using respond.js

When making a child theme for a wordpress theme, as I was doing, it is common practice to use @import to pull in the parent theme's CSS file as a basis to start cutomizing. It says on the respond.js reamde that using @import with respond.js does not work - and after I removed this from my child theme it stopped crashing in ie8

I can confirm the crash here too, Windows XP 32-bit, Internet Explorer 8.0.6001.18702.

Tried removing background, changing place of the script to right under the css.

Then i put the script at the very bottom, before < / body >. And it works! Even with backgrounds, modernizr, PIE.htc etc...

Can it be that the script applies the media-queries too soon?
Can anyone confirm if placing the script at the bottom works for you too?

jmburnz commented Nov 8, 2011

I hit this issue in one of my Drupal themes: http://drupal.org/node/1323608

Two users have confirmed that moving the background image from body to html works.

I like the idea of putting the script at the bottom, if there are no drawbacks (I haven't noticed any in my limited testing), this would be a far more robust workaround for us (respond.js is loaded by our base theme).

tmikaeld commented Nov 8, 2011

I haven't found any drawbacks to moving the script to the bottom, at least not so far.

My tests include about 10 different jquery plugins now and modernizr, no issues with anything.

mrfenix commented Nov 8, 2011

I think I may have found the solution for everyone that has their sites crashing with IE 7 or 8.

repsond.js does not work the @import. So if you have the @import in your css file then it will crash on IE.

If you are working with a wordpress child theme then this could cause an issue because child themes specifically use @import on WP. Copy all the CSS in the @import and paste it into your main stylesheet. You may have to fix image urls if the main stylesheet and the child theme stylesheet are in different folders.

tmikaeld commented Nov 8, 2011

I have none @import in my code.

joshkg commented Nov 10, 2011

I have also gotten crashes in ie7 and ie8 while using respond.js alongside Modernizr with a background image on the body tag. Using an @import (with no media queries inside the @import'd css file) was not the issue. Removing modernizr fixed the crashes, so it looks like a conflict with modernizr when using a bg image on the body tag.

Moving the background image from the body tag to the html tag fixed the crashes.

Moving the respond.js script from the head to the bottom of the page just above the </body> also seems to fix the crashes.

Just for the sake of it i removed modernizr and it seemed to stop crashing. But if i reload and restart a couple of times, the crashed keep happening. Just more rarely.

kb04090 commented Nov 17, 2011

I redid several landing pages on a client's site to provide connectivity to older mobile devices through media query. Pages load fine on tablet and desktop as is. Background images on every page.

After hearing (from client ... I hate when THAT happens) that the site was crashing people's browsers (IE8) I scurried to find a resolution.

I found two solutions. I prefer the 2nd.

  1. move respond.src.js call line to bottom of page, before . This fixed the problem of crashing immediately, but as the page was loading all of images provided for the multiple @media styles showed until the whole page loaded and the respond.src.js took effect. Yuck.
  2. I created a ID called "page" and inserted it in my CSS after the "BODY {}". I cut and pasted all of the references from the "body {}" to my background (src, repeat, size, color, etc.) to this "#page {}". I wasn't sure I had to, but I also added "display: block; and width: auto;" here.

I then was able to move the respond.src.js back up to the head, after my CSS statements and before the call for modernizr. Loading seems faster and individual doesn't get a peak at 3 formats initially. Some people have suggested putting the images on the HTML tag, but an initial test in a simulator wasn't good. Wrapped the hole content (between and in my

kb04090 commented Nov 17, 2011

[above post got truncated, I think because is had a body tag in there. I've amended the post to remove carat brackets]

ABOVE continued: the closing HTML tag. This fixed the problem of crashing immediately, but all versions were flashing on the screen until the respond.src.js took effect. Yuck.

TWO Wrapped the hole content, between TAGS body and /body, in DIV id="page" / /div. I cut and pasted all of the references to my background (src, repeat, size, color, etc.) from the "body {}" to this "#page {}". I wasn't sure I had to, but I also added "display: block; and width: auto;" here. Moved respond.src.js back to head (between CSS and modernizr). Works and seems faster.

It sounds like the body tag is the culprit here, i think it's starting to get narrowed down.

I don't wan't to change our entire web-framework just to move body code to a wrapper.

EDIT: Sorry to hear about the client reporting it, it's terrible when that happens.

We/ I was able to use an existing class attached to < body > and declare the background image there and it worked, meaning the error cleared.

So rather than change the entire frame work, just append a class to < body >

I tested with the class on the body, works!! Best suggestion yet!

Bobz-zg commented Dec 25, 2011

I have moved bg image to html and moved modernizer above CSS, now it works for me. Hopefully for my visitors to.

I find I'm having the issues discussed here too, same version of IE8 as everyone else, same problems. I think I may have narrowed my problems down a little and want some advice on how to resolve this issue.

The background image on <html> tag works, script loaded in any order in the head. My problem is a little more complicated though. We use a homebrew CSS framework here that uses one stylesheet with 4 @import rules to call the relevant styles (mainly for tidier code) but this makes the respond.js not work at all.

Does respond.js not know to follow @import rules? Is there a fix, or should I just attach the 4 stylesheets directly to the head?

Just as a side note, attaching the stylesheets directly works fine, I would just like to see if the issue of @import rules can be resolved ;o)

mrfenix commented Jan 10, 2012

Hi John,

I think your best bet would be to copy all the css from your @import into
the main .css file. Give it a try and see if that helps.

Chris Landman - Interactive Media Designer.
Blog: http://mypixelbox.net
*Mobile: *+27 72 958 9889
My profiles: [image:
Facebook]http://www.facebook.com/profile.php?ID=750351188 [image:
LinkedIn] http://za.linkedin.com/in/thelandman [image:
Flickr]http://www.flickr.com/photos/mrfenix [image:
Twitter] http://www.twitter.com/the_landman
Contact me: [image: Google Talk] landman.chris [image: Skype] mrfenix2 [image:
MSN] mrfenix [image: Y! messenger] mrfenix
[image: Twitter] http://twitter.com/the_landmanLatest tweet: Like
#Artrift on Facebook. Find brilliant #art #design #illustration on
Artrift!! http://t.co/7EK6bcDw
Follow @the_landman http://twitter.com/the_landman Reply
http://twitter.com/?status=@the_landman%20&in_reply_to_status_id=145081689830461440&in_reply_to=the_landman
Retweet
http://twitter.com/?status=RT%20%40the_landman%3A%20Like%20%23Artrift%20on%20Facebook.%20Find%20brilliant%20%23art%20%23design%20%23illustration%20on%20Artrift%21%21%0Ahttp%3A%2F%2Ft.co%2F7EK6bcDw
12:05 Dec-09http://twitter.com/the_landman/statuses/145081689830461440
Get this email app!
http://www.wisestamp.com/apps/twitter?utm_source=extension&utm_medium=email&utm_term=twitter&utm_campaign=apps

IMPORTANT: The contents of this email and any attachments are confidential.
They are intended for the named recipient(s) only. If you have received
this email by mistake, please notify the sender immediately and do not
disclose the contents to anyone or make copies thereof.
Get a signature like this.
http://r1.wisestamp.com/r/landing?promo=18&dest=http%3A%2F%2Fwww.wisestamp.com%2Femail-install%3Futm_source%3Dextension%26utm_medium%3Demail%26utm_campaign%3Dpromo_18
Click
here.http://r1.wisestamp.com/r/landing?promo=18&dest=http%3A%2F%2Fwww.wisestamp.com%2Femail-install%3Futm_source%3Dextension%26utm_medium%3Demail%26utm_campaign%3Dpromo_18

On Tue, Jan 10, 2012 at 3:57 PM, John Porter <
reply@reply.github.com

wrote:

I find I'm having the issues discussed here too, same version of IE8 as
everyone else, same problems. I think I may have narrowed my problems down
a little and want some advice on how to resolve this issue.

The background image on <html> tag works, script loaded in any order in
the head. My problem is a little more complicated though. We use a homebrew
CSS framework here that uses one stylesheet with 4 @import rules to call
the relevant styles (mainly for tidier code) but this makes the
respond.js not work at all.

Does respond.js not know to follow @import rules? Is there a fix, or
should I just attach the 4 stylesheets directly to the head?


Reply to this email directly or view it on GitHub:
#27 (comment)

designermonkey: You can get around the problem with imports not working by using less.js, if you use windows you can use winless or less.app for OS X to process .less files and concatenate them to one minified CSS file every time you hit the save button in your editor. This way you can work with your framework with several files and have no problems with @import, you will also gain the power of less.js.

Owner

scottjehl commented Jan 10, 2012

Hi all!
Just chiming in to say I'll be taking a look at this one this week as soon as I get time - it's the top priority bug.

@JohnPorter correct - Respond only follows stylesheets linked via link elements. I'd suggest concatenating the 4 files into one on the server side if you can, since @import generates separate HTTP requests anyhow. If that's not an option, 4 link elements should work with Respond - let me know if you find differently! :)

On Jan 10, 2012, at 8:57 PM, John Porter wrote:

I find I'm having the issues discussed here too, same version of IE8 as everyone else, same problems. I think I may have narrowed my problems down a little and want some advice on how to resolve this issue.

The background image on <html> tag works, script loaded in any order in the head. My problem is a little more complicated though. We use a homebrew CSS framework here that uses one stylesheet with 4 @import rules to call the relevant styles (mainly for tidier code) but this makes the respond.js not work at all.

Does respond.js not know to follow @import rules? Is there a fix, or should I just attach the 4 stylesheets directly to the head?


Reply to this email directly or view it on GitHub:
#27 (comment)

Owner

scottjehl commented Jan 10, 2012

Hi again
John if I understand what you're saying (I'm not familiar with less.js unfortunately), it sounds like one concatenated file comes through in the end anyhow due to your server setup? If so, that seems like it should be okay with Respond...

On Jan 10, 2012, at 9:03 PM, tmikaeld wrote:

designermonkey: You can get around the problem with imports not working by using less.js, if you use windows you can use winless or less.app for OS X to process .less files and concatenate them to one minified CSS file every time you hit the save button in your editor. This way you can work with your framework with several files and have no problems with @import, you will also gain the power of less.js.


Reply to this email directly or view it on GitHub:
#27 (comment)

I think the route is definitely to go down the concatenation at production route. It works fine as four files linked in to the main document, so I can survive with that until I come to 'go live' where I will squash everything.

Thanks so much everyone for jumping on this quickly, and thanks for the ideas!

joshkg commented Jan 23, 2012

Incidentally, if there are no media queries present in the CSS at all, ie8 crashes in the same way. Even commented out media queries keep the browser running, but if there are no @ media references at all, it crashes.

Owner

scottjehl commented Jan 27, 2012

Hi all, this thread has diverged in a few directions, but the main issues are now fixed:

  • IE crash when there's a background image on the html element (or in some cases on the body element)

@import rules are not supported by respond.js, but I'd advise not using them anyway. The same organizational benefits of @media can be replicated through concatenating files on the server, and as a result, you'll save HTTP requests and performance problems. Steve Souders has covered this in better detail here for more info: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

@joshkg the no-queries issue you mention sounds problematic for sure, but I'm not able to reproduce it in latest Master. Can you try and reproduce the bug in an isolated test? If so, please file a new issue and I'll be sure to take a look.

Thanks everyone.

@scottjehl scottjehl closed this Jan 27, 2012

One data point for sufferers; We found that the attribute that triggered the IE crashes when combined with Modernizr was related to 'print' vs 'screen' style sheets 'media' attribute. We found that is you explicitly say 'screen' (which as you know is the default anyway) that leads to the IE crash. Here is the versions offending line:

  1. <link rel="stylesheet" href="/css/style.css"> --> No crash
  2. <link rel="stylesheet" href="/css/style.css" media="print"> --> No crash
  3. <link rel="stylesheet" href="/css/style.css" media="screen"> --> Crash!

We found if we avoid (3) we could avoid the IE crashes.

We have not used @import but with do use @media, e.g. '@media only screen and (min-width: 480px)'
CSS files that do not use @import or @media do not trigger the problem, even if you do explicitly specify 'media="screen"'.

Aaron.

We can confirm that when creating a child theme for any of the new WooThemes responsive designs (Buro, Shelflife, etc.), it breaks IE8 if you use the traditional @import method.

Following the suggestions herein, our fix was to remove the @import from our child theme style.css and instead add method to the top position in the header.php we include in our child theme, right below the title tag. Don't forget to use "template_directory" instead of "stylesheet_directory" as you would normally in the child theme style.css with @import.

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">

Problem solved!

I'm actually still experiencing this issue when using the latest version of respond.js--if I have a background image on the body element, IE8 crashes. As soon as I remove the background image, the problem goes away. You can see the issue in action here: tallyho.restlessbeedev.com. Thanks in advance for any thoughts you might have.

Erik

We've discovered the reason!! ;-)

The issue we just wrote up on github. It has to do with Woo's lack of addressing the use of @import for child theme style.css. The solution is super duper easy.

Just go to your child theme and remove the @import for the parent theme style.css and instead use the method, by putting the same in the top of your header.php file (in the child theme). Detailed instructions here: #27 (comment)

Cheers!
Spence

Sent with Sparrow (http://www.sparrowmailapp.com/?sig)

On Thursday, February 9, 2012 at 9:54 AM, restlessbee wrote:

I'm actually still experiencing this issue when using the latest version of respond.js--if I have a background image on the body element, IE8 crashes. As soon as I remove the background image, the problem goes away. You can see the issue in action here: tallyho.restlessbeedev.com (http://tallyho.restlessbeedev.com). Thanks in advance for any thoughts you might have.

Erik


Reply to this email directly or view it on GitHub:
#27 (comment)

Eric, sorry for the last reply... I got you confused with one of our other customers ;-)

After I sent it, I saw you had been posting in response to our github link...doh!

i'll have a peek and see what I can figure out on your site ;-)

Cheers!
Spence

Sent with Sparrow (http://www.sparrowmailapp.com/?sig)

On Thursday, February 9, 2012 at 9:54 AM, restlessbee wrote:

I'm actually still experiencing this issue when using the latest version of respond.js--if I have a background image on the body element, IE8 crashes. As soon as I remove the background image, the problem goes away. You can see the issue in action here: tallyho.restlessbeedev.com (http://tallyho.restlessbeedev.com). Thanks in advance for any thoughts you might have.

Erik


Reply to this email directly or view it on GitHub:
#27 (comment)

mjepson commented Feb 10, 2012

Hi, just read a few comments here about WooThemes crashing in IE8 because of respond.js, when using a child theme.

Solution I used was to load respond.js separately from other JS, and load it in footer instead of HEAD area.

Lab,

Your solutions doesn't resolve the problem.
I remove the @import from my child theme, but the problem is still happen.

Hi Marko,
if you read above there are a few other things that might be going on that could be causing your issue. For us, the @import was the cause of the problem and fixed it... but obviously that is not always a universal fix. Sorry ;-(

some node styles crash, hack is style position:relative , almosts break my head whats is it..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment