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

@Media Queries not working in lte IE8 due to spaces in breakpoint dimension parentheses #179

Closed
jonrandahl opened this Issue Jan 31, 2013 · 19 comments

Comments

Projects
None yet
9 participants
@jonrandahl
Copy link

jonrandahl commented Jan 31, 2013

Just wanted to let everyone know of an issue I ran into in Respond.js v1.1.0 with IE9 set to IE8 or 7 view, as well as on a native IE8 install.
I had a media query set as such:
"@media only screen and ( max-width: 1280px ) {...}" <- note the spaces inside the dimension call which was then causing the browser to not render this, or any other following, adjusted viewport styles.
After a whole load of googling to no avail I went back in to see what was different in this media query to the single media query above it which was applying:
"@media only screen and (min-width:1280px) {...}" <- note: no spaces in this one, or any others after the offending one noted for that matter!
I then removed the spaces, and tested this in IE8 and 7, and both are now displaying the correct styles for the required dimensions!
Note, it's only the initial space that throws IE out, the trailing one doesn't seem to affect anything in case you're wondering.

Just thought I would share this "head-meet-desk" moment and the "warm-fuzzies" revelation that followed!

Thank you for your time and patience,
Jon

@amdrew

This comment has been minimized.

Copy link

amdrew commented Feb 6, 2013

Thanks for reporting. I wish I had seen your message a lot earlier. Took me hours to figure this one out, stripping the site down to an absolute barebones example and have it still failing on IE9 (set to IE8). Then I saw the spaces in the media query... what a moment for celebration that was.

@jonrandahl

This comment has been minimized.

Copy link
Author

jonrandahl commented Feb 6, 2013

Sumobi,
Glad to have been of service.
This was exactly what happened to me and I just thought if I could save anyone else the hassle!
Hope your build looks sweet across all the browsers!
J

@nickff

This comment has been minimized.

Copy link

nickff commented Feb 11, 2013

@sumobi @jonrandahl,

You guys have any other tips on getting respond.js to work in IE8? I've followed all the main instructions (using min-width and max-width media queries, placing the script in the head after all css files, preparing to pump fists in delight...) and nothing. Nada. Zero response to my media queries in IE8. I then found this thread and ensured all my queries had no spaces. Still nothing.

Here's my main query I'm hoping IE8 will process:

@media only screen and (min-width:768px) and (max-width:1119px) {...}

I've also tried it as just "max-width" without the min-width argument. Nothing.

If you can provide any other tips, it would be SO appreciated! And I'll have a link to share on this soon.

@scottjehl

This comment has been minimized.

Copy link
Owner

scottjehl commented Feb 11, 2013

Hmm. Do you have any commented code including curly braces? That could throw it off in some cases. Did you try without the "only screen and" part too (assuming you don't need the screen media type)?

On 11 Feb 2013, at 09:12, Nick Hoag notifications@github.com wrote:

@sumobi @jonrandahl,

You guys have any other tips on getting respond.js to work in IE8? I've followed all the main instructions (using min-width and max-width media queries, placing the script in the

after all css files, preparing to pump fists in delight...) and nothing. Nada. Zero responding to my media queries. I then found this thread and ensured all my queries had no spaces. Still nothing.
Here's my main query I'm hoping IE8 will process:

@media only screen and (min-width:768px) and (max-width:1119px) {...}

I've also tried it as just "max-width" without the min-width argument. Nothing.

If you can provide any other tips, it would be SO appreciated! And I'll have a link to share on this soon.


Reply to this email directly or view it on GitHub..

@nickff

This comment has been minimized.

Copy link

nickff commented Feb 11, 2013

@scottjehl hmm, no commented code in or around the query, and I tried removing the "only screen and" portion of the argument, to no avail.

any other ideas would be much appreciated, and I'll have the link available to share shortly...

@scottjehl

This comment has been minimized.

Copy link
Owner

scottjehl commented Feb 11, 2013

A link would be good, thanks!

Also, the stylesheet is same domain, yes?

On Mon, Feb 11, 2013 at 1:36 PM, Nick Hoag notifications@github.com wrote:

@scottjehl https://github.com/scottjehl hmm, no commented code in or
around the query, and I tried removing the "only screen and" portion of the
argument, to no avail.

any other ideas would be much appreciated, and I'll have the link
available to share shortly...


Reply to this email directly or view it on GitHubhttps://github.com//issues/179#issuecomment-13398190.

@nickff

This comment has been minimized.

Copy link

nickff commented Feb 11, 2013

It's a shopify site, so the stylesheet is cached on their CDN...maybe
that's the problem?

@scottjehl

This comment has been minimized.

Copy link
Owner

scottjehl commented Feb 11, 2013

yeah - the ajax usage usually requires same domain. check out the cross-domain patch in the repo.

Close this out?

On 11 Feb 2013, at 14:09, Nick Hoag notifications@github.com wrote:

It's a shopify site, so the stylesheet is cached on their CDN...maybe
that's the problem?

Reply to this email directly or view it on GitHub.

@nickff

This comment has been minimized.

Copy link

nickff commented Feb 11, 2013

I've included the proxy js file right after the main respond script, and that's not helping...any other steps that should be needed?

@jonrandahl

This comment has been minimized.

Copy link
Author

jonrandahl commented Feb 11, 2013

Nick,
if you can set up a link to share we might be able to see something better, not really sure otherwise?
Jon

Sent from my 768/1024 mini

On 11 Feb 2013, at 20:38, Nick Hoag notifications@github.com wrote:

I've included the proxy js file right after the main respond script, and that's not helping...any other steps that should be needed?


Reply to this email directly or view it on GitHub.

@nickff

This comment has been minimized.

Copy link

nickff commented Feb 12, 2013

@jonrandahl @scottjehl here's the link:

http://www.tiinathestore.com/

I went ahead and took the reference to the proxy.js file out, since it wasn't doing anything. If there's another step to take other than just including the file (or you think of anything else), let me know.

Thanks so much guys. Hugely appreciated.

@jonrandahl

This comment has been minimized.

Copy link
Author

jonrandahl commented Feb 12, 2013

Nick,

On initial glance using the Developer Kit on Chrome I can’t see anything incorrect on the implementation of Scott’s respond.js?

However, I can see a whole load of XSS issues (31 to be exact) all having to do with Facebook:
Unsafe JavaScript attempt to access frame with URL https://www.facebook.com/plugins/likebox.php?api_key&locale=en_US&sdk=joey&channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D18%23cb%3Df2fcb590dc%26origin%3Dhttp%253A%252F%252Fwww.tiinathestore.com%252Ff25b846ee8%26domain%3Dwww.tiinathestore.com%26relation%3Dparent.parent&height=560&header=false&show_faces=true&stream=true&width=480&href=http%3A%2F%2Fwww.facebook.com%2Ftiinathestore&colorscheme=light&border_color=white https://www.facebook.com/plugins/likebox.php?api_key&locale=en_US&sdk=joey&…2F%2Fwww.facebook.com%2Ftiinathestore&colorscheme=light&border_color=white from frame with URL http://www.tiinathestore.com/pages/discover http://www.tiinathestore.com/pages/discover. The frame requesting access has a protocol of 'http', the frame being accessed has a protocol of 'https'. Protocols must match.

I would suggest organising this first to rule them out and then let us know.

Out of curiosity, I would like to know, as I’ve not used shopify before, would there be any way to move some of those 29 JS calls to the bottom of your pages?

Jon

Random Precision Ltd.

D: 0044 (0)159 456 3379
O: 0044 (0)159 456 3715
M: 0044 (0)780 960 9919

Skype: contact.random.precision
Twitter: @PrecisionCoding
Facebook: http://goo.gl/nNp57

P Please consider the environment before printing this e-mail

From: Nick Hoag [mailto:notifications@github.com]
Sent: 12 February 2013 23:00
To: scottjehl/Respond
Cc: Jon R. Humphrey
Subject: Re: [Respond] @media Queries not working in lte IE8 due to spaces in breakpoint dimension parentheses (#179)

@jonrandahl https://github.com/jonrandahl @scottjehl https://github.com/scottjehl here's the link:

http://www.tiinathestore.com/

I went ahead and took the reference to the proxy.js file out, since it wasn't doing anything. If there's another step to take other than just including the file (or you think of anything else), let me know.

Thanks so much guys. Hugely appreciated.


Reply to this email directly or view it on GitHub #179 (comment) .

https://github.com/notifications/beacon/HSFEcdU42WIJnqCp5cBuV0t3zDh-Jr8C1NudLZrKAk6l6v8HOalk2nlO300oY4Qi.gif

@nickff

This comment has been minimized.

Copy link

nickff commented Feb 13, 2013

Jon,

Thanks for the heads up on the facebook like box. I'm assuming you're referring to the code on the Discover page. It's odd that it was problematic, as it was simply the code provided by Facebook here - http://developers.facebook.com/docs/reference/plugins/like-box/. I've since tried modifying the single http requrest located in that code, so hopefully it's all set now.

In terms of the placement of the JS, this is my first time using Shopify and I had run into some issues with moving certain scripts to the end of the template, but I've now managed to at least get a portion of the script calls right before .

Unfortuntately, neither of these changes is helping in any way with the respond.js issue on IE8. Very odd. Let me know if you notice anything else, and thanks so much for the help here!

@dwilt

This comment has been minimized.

Copy link

dwilt commented Mar 25, 2013

You just saved me on a project with this. We couldn't figure out why Respond.js wasn't working. Came here to the issues, saw your post, put in the fix that you recommended, and presto.. it's working.

Thank you so much.

@jonrandahl

This comment has been minimized.

Copy link
Author

jonrandahl commented Mar 25, 2013

Your gratitude is greatly appreciated dwilt; however neither of us would be here if it wasn't for Scott's work, go say thanks to him too!

@zachleat zachleat closed this in 583ee45 Nov 25, 2013

@zachleat

This comment has been minimized.

Copy link
Collaborator

zachleat commented Nov 25, 2013

The regular expressions will allow spaces inside the parens now.

@ghost ghost assigned zachleat Nov 25, 2013

@heiniuhaha

This comment has been minimized.

Copy link

heiniuhaha commented Dec 4, 2013

thank you for so much!I have this confuse so long.now, I know what‘s wrong it is.

@Erickmok

This comment has been minimized.

Copy link

Erickmok commented Jan 14, 2015

thanks a lot !! this help me so much, sorry but fucking ie 8 !!

@jigar140291

This comment has been minimized.

Copy link

jigar140291 commented Aug 30, 2016

respond.js supports on page media query under <style> tag ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.