<IE9 wrongly evaluates rules containing device-pixel MQ as true #157

Closed
nternetinspired opened this Issue Oct 9, 2012 · 5 comments

Comments

Projects
None yet
5 participants
@nternetinspired

Using the current version, 1.2.0, IE8 is displaying the styles within this media-query:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-width: 86.375em) {

logo {

background: url(../images/large/2xlogo.png) scroll 0 0 no-repeat;
background-size: 450px;
}
}

I had expected that the min-width query would never be read because of the preceding pixel-ratio queries.

@mhulse

This comment has been minimized.

Show comment Hide comment
@mhulse

mhulse Feb 20, 2013

I think I'm having the same problem. Retina display images are loading in old IEs. The patch I'm using is to override the retina with standard resolution image. It's not an optimal solution ... I'd love to know how to fix respond.js so it skips this style of media query. Once I get some free time, I might try and do a pull request, though it looks like there's a back log of pulls ...

mhulse commented Feb 20, 2013

I think I'm having the same problem. Retina display images are loading in old IEs. The patch I'm using is to override the retina with standard resolution image. It's not an optimal solution ... I'd love to know how to fix respond.js so it skips this style of media query. Once I get some free time, I might try and do a pull request, though it looks like there's a back log of pulls ...

@jefflembeck

This comment has been minimized.

Show comment Hide comment
@jefflembeck

jefflembeck Nov 20, 2013

Collaborator

The parser is grabbing anything that matches min/max-width currently. Will look into.

Collaborator

jefflembeck commented Nov 20, 2013

The parser is grabbing anything that matches min/max-width currently. Will look into.

@BigglesZX

This comment has been minimized.

Show comment Hide comment
@BigglesZX

BigglesZX Dec 19, 2013

@jlembeck Did you have any luck with this one? I'm experiencing the same issue. Many thanks!

@jlembeck Did you have any luck with this one? I'm experiencing the same issue. Many thanks!

@zachleat

This comment has been minimized.

Show comment Hide comment
@zachleat

zachleat Dec 26, 2013

Collaborator

I’m a bit confused by this issue, the comma separated list syntax acts like the OR operator. So if only screen and (min-width: 86.375em) evaluates to true in the above example the block will apply correctly. I’m going to reopen 181 and close this issue since the example reported 181 is a bug.

Collaborator

zachleat commented Dec 26, 2013

I’m a bit confused by this issue, the comma separated list syntax acts like the OR operator. So if only screen and (min-width: 86.375em) evaluates to true in the above example the block will apply correctly. I’m going to reopen 181 and close this issue since the example reported 181 is a bug.

@zachleat zachleat closed this Dec 26, 2013

@mhulse

This comment has been minimized.

Show comment Hide comment
@mhulse

mhulse Dec 29, 2013

Hey folks, we're continuing this conversation in #181. We're looking for some (gnarly) media query examples that can be used to help test a patch that @zachleat wrote to fix this issue. If you can contribute some example media queries for testing, that would be great!

mhulse commented Dec 29, 2013

Hey folks, we're continuing this conversation in #181. We're looking for some (gnarly) media query examples that can be used to help test a patch that @zachleat wrote to fix this issue. If you can contribute some example media queries for testing, that would be great!

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