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

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

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!

scottjehl commented 13 years ago

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

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

keld30 commented 13 years ago

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?

scottjehl commented 13 years ago

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

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! :)

donnierayjones commented 13 years ago

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!

donnierayjones commented 13 years ago

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

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

scottjehl commented 13 years ago

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

donnierayjones commented 13 years ago

Thanks for looking into it! Very weird!

scottjehl commented 13 years ago

Can you check if the crash occurs when these changes are in place? https://github.com/scottjehl/Respond/pull/35

It might be related. thanks!

donnierayjones commented 13 years ago

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

danj commented 13 years ago

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.

gordonbrander commented 13 years ago

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 https://github.com/Modernizr/Modernizr/issues/332).

donnierayjones commented 13 years ago

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

gordonbrander commented 13 years ago

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.

eppsilon commented 13 years ago

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

richardwiggins commented 13 years ago

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

EspadaV8 commented 13 years ago

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" />
...
richardwiggins commented 13 years ago

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.

richardwiggins commented 13 years ago

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

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

gibson10ma commented 13 years ago

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

removing comment posted in wrong place, sorry @lucisferre

barkan commented 13 years ago

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.

chrisnicola commented 13 years ago

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

jafoca commented 13 years ago

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.

scottjehl commented 13 years ago

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

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

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

tmikaeld commented 12 years ago

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

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

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

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

I have none @import in my code.

joshkg commented 12 years ago

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.

tmikaeld commented 12 years ago

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

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

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

tmikaeld commented 12 years ago

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.

xenobryan commented 12 years ago

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 >

tmikaeld commented 12 years ago

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

Bobz-zg commented 12 years ago

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

edo-codes commented 12 years ago

designermonkey commented 12 years ago

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?

designermonkey commented 12 years ago

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

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

tmikaeld commented 12 years ago

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.