search

scottjehl / Respond

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
MIT License
11.33k stars 3.36k forks source link

Can't use in IE8 #27

Closed keld30 closed 12 years ago

keld30 commented 13 years ago

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!

scottjehl commented 12 years ago

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: https://github.com/scottjehl/Respond/issues/27#issuecomment-3429981

scottjehl commented 12 years ago

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: https://github.com/scottjehl/Respond/issues/27#issuecomment-3430050

designermonkey commented 12 years ago

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 12 years ago

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.

scottjehl commented 12 years ago

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

@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.

whereisaaron commented 12 years ago

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.

labsecrets commented 12 years ago

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!

restlessbee commented 12 years ago

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

labsecrets commented 12 years ago

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: https://github.com/scottjehl/Respond/issues/27#issuecomment-3808245

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: https://github.com/scottjehl/Respond/issues/27#issuecomment-3889737

labsecrets commented 12 years ago

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: https://github.com/scottjehl/Respond/issues/27#issuecomment-3889737

mjepson commented 12 years ago

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.

Marko980 commented 12 years ago

Lab,

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

labsecrets commented 12 years ago

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 ;-(

KonstantinGreat commented 9 years ago

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