Retina display MQ loading in IE7? #181

Closed
mhulse opened this Issue Feb 13, 2013 · 18 comments

Projects

None yet

6 participants

@mhulse
mhulse commented Feb 13, 2013

Hi,

The below media query is being read in IE7 (I have yet to test IE6):

@media
only screen and (max-width: 1319px) and (min--moz-device-pixel-ratio: 1.5),
only screen and (max-width: 1319px) and (-moz-min-device-pixel-ratio: 1.5),
only screen and (max-width: 1319px) and (-o-min-device-pixel-ratio: 3/2),
only screen and (max-width: 1319px) and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (max-width: 1319px) and (min-device-pixel-ratio: 1.5),
only screen and (max-width: 1319px) and (min-resolution: 1.5dppx) { ... }

Issue #53 has some related/helpful info (from a year back), like:

You might want to use the only keyword. For example: @media only screen and (min-width: 50px)

Using only is defined in the spec as the way to hide style blocks from any browser that doesn't understand media queries, which sounds like what you want in your case.

As you can see, I'm using only, but the MQ still loads.

Anyone know how I could modify my syntax above to get respond.js to ignore the styles within the MQ?

Thanks!
M

@mhulse
mhulse commented Feb 13, 2013

Ahhh, I wonder if it's because I have a return after @media and no space!

I'm also using Grunt's excellent mincss task (which uses the awesome clean-css Node lib) and it's not exactly liking newline (without a space) directly after the @media.

With that said, it's easy enough for me to put a space after the @media or move the first only on the same line.

Or, heck with it, I'll make it all one line:

@media only screen and (max-width: 1319px) and (min--moz-device-pixel-ratio: 1.5), only screen and (max-width: 1319px) and (-moz-min-device-pixel-ratio: 1.5), only screen and (max-width: 1319px) and (-o-min-device-pixel-ratio: 3/2), only screen and (max-width: 1319px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1319px) and (min-device-pixel-ratio: 1.5), only screen and (max-width: 1319px) and (min-resolution: 1.5dppx) {

(That makes ST2 syntax highlighter happy as well.) 🎉

I'll be back with my results. Thanks for listening. ✌️

@mhulse
mhulse commented Feb 14, 2013

Ah, no luck.

I ended up putting the MQ all on one line:

@media only screen and (max-width: 1319px) and (min--moz-device-pixel-ratio: 1.5), only screen and (max-width: 1319px) and (-moz-min-device-pixel-ratio: 1.5), only screen and (max-width: 1319px) and (-o-min-device-pixel-ratio: 3/2), only screen and (max-width: 1319px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1319px) and (min-device-pixel-ratio: 1.5), only screen and (max-width: 1319px) and (min-resolution: 1.5dppx) { ... }

And it still loaded in IE8 (I did not check lower versions).

I'm currently patching via IE-specific classes that I've applied to the <html> element (standard stuff):

<!--[if IE 6]>         <html class="no-js ie6 lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js ie7 lt-ie9 lt-ie8">        <![endif]-->
<!--[if IE 8]>         <html class="no-js ie8 lt-ie9">               <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js no-touch">                 <!--<![endif]-->

... and then overriding retina styles like so (for example):

.lt-ie9 .mk-toggle a { background-image: url(./images/toggle.gif); }

... but it would be nice to know what I'm doing wrong (if anything); or, could this be a feature request for respond.js (i.e. if it's not my syntax, I'm assuming it's because my MQ is complex and not accounted for in the regex)?

Any feedback would be appreciated.

Cheers,
Micky

@mhulse
mhulse commented Feb 20, 2013

I wonder if this problem is related to Issue #157?

@jefflembeck
Collaborator

Should be the same problem. Closing as a duplicate.

@zachleat zachleat reopened this Dec 26, 2013
@zachleat
Collaborator

Reopening per comment in #157.

@zachleat
Collaborator

I added a fix for this in https://github.com/scottjehl/Respond/tree/issue-181 but wanted more eyes on it before it goes into master.

@mhulse
mhulse commented Dec 26, 2013

@zachleat Nice! Thanks for your patch on this one.

Would it be of some help for me to cross-browser test? I typically use devices I have on hand (mostly Mac) and then I have a subscription to http://www.browserstack.com.

Is there anything in particular you would like to get more 👀 on? :octocat:

@zachleat
Collaborator

Mostly just nervous about edge cases with other query types that might be ignored here.

We’re stripping out min/max-width/heights from the query and then simply doing a search for other parens. If they exist, we bypass the query. So, it’s a little bit dangerous to switch wholesale from an include everything approach to a limited whitelist.

Maybe find some of your gnarlier MQ selectors and paste them in here so I can test?

@mhulse
mhulse commented Dec 26, 2013

Maybe find some of your gnarlier MQ selectors and paste them in here so I can test?

Sounds good! I'll scour to find as many gnarly tests as possible. I'll have some time this Saturday/Sunday to do this (hope you don't mind waiting a few days?).

Thanks!

@zachleat
Collaborator

No worries! Thank you!

@mhulse
mhulse commented Dec 29, 2013

Well, I hate to say it, but I couldn't find too many variations of media queries that I've used over the last couple of years.

Here's what I could find:

@media all and (min-width: 665px) {}

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {}

@media only screen and (min-width: 0) and (max-width: 664px) {}
@media only screen and (min-width: 665px) and (max-width: 1004px) {}
@media only screen and (min-width: 1005px) and (max-width: 1344px) {}
@media only screen and (min-width: 1345px) {}

@media 
only screen and (max-width: 1004px) and (min--moz-device-pixel-ratio: 1.5),
only screen and (max-width: 1004px) and (-moz-min-device-pixel-ratio: 1.5),
only screen and (max-width: 1004px) and (-o-min-device-pixel-ratio: 3/2),
only screen and (max-width: 1004px) and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (max-width: 1004px) and (min-device-pixel-ratio: 1.5),
only screen and (max-width: 1004px) and (min-resolution: 1.5dppx) {}

/* HTML5 Boilerplate: */
@media print,
    (-o-min-device-pixel-ratio: 5/4),
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-resolution: 120dpi) {
        /* Style adjustments for high resolution devices */
}
@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

I also grabbed what is probably the latest/best way to target "high resolution" devices in the HTML5 Boilerplate example above.

I'm going to ping the folks in #157 to see if they can help to contribute to this thread with more MQ examples.

I hope that's of some help. Let me know if there's anything more I can do to help out.

@BigglesZX

@mhulse @zachleat Hi, the original MQ that I found to be producing incorrect behaviour was this one:

@media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min--moz-device-pixel-ratio: 1.5), (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5), (min-width: 768px) and (min-device-pixel-ratio: 1.5) { }

Worth noting perhaps that it appears in my code in both single-line and multi-line formats, with the newlines coming after the commas:

@media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5),
    (min-width: 768px) and (min--moz-device-pixel-ratio: 1.5),
    (min-width: 768px) and (-o-min-device-pixel-ratio: 1.5),
    (min-width: 768px) and (min-device-pixel-ratio: 1.5) { }

Thanks for your work on this!

@mhulse
mhulse commented Dec 29, 2013

Thanks for your work on this!

Thanks @BigglesZX!

Thanks for your work on this!

Ditto! @zachleat, you are da man! 👍

@zachleat zachleat added a commit that closed this issue Dec 30, 2013
@zachleat zachleat Fixes #181. Not the most future-proof solution, but simply checks for…
… a non-min/max-width/height selector and ignores.
4ad4221
@zachleat zachleat closed this in 4ad4221 Dec 30, 2013
@zachleat
Collaborator

Okay, I added a few more test cases from the spec and merged this. Please test and let me know if you see any issues! Thanks!

@mhulse
mhulse commented Dec 30, 2013

Awesome! Thanks for all of your hard work @zachleat! :octocat:

@mahnunchik

Hi, why this fix is still not in upstream?
I mean bower and this CDN https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js

@mhulse
mhulse commented Mar 14, 2014

I'm guessing there needs to be a version bump and a new release drafted: https://github.com/scottjehl/Respond/releases

Note that the latest release is "12 commits to master" behind.

@bobprokop

Pretty certain that this same issue (multiple selectors delimited by comma and line-break) will occur for IE8 with respond.js for a scenario such as this as well:

@media screen and (some rule) {
    .item,
    .other-item {
        rule: value;
    }
}

From what I've experienced IE8 will ignore these rules when written as shown. If you parse them out into separate lines (and thus repeat the rule:value declaration) like this:

@media screen and (some rule) {
    .item {
        rule: value;
    }
    .other-item {
        rule: value;
    }
}

...respond.js implements them perfectly for IE8. Not exactly DRY but it works. Reading through this (admittedly old) thread I'm thinking that simply removing the line-break from the original format might work as well but I have yet to try it.

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