IE8 JQuery Mobile navigation images broken #89

BrentHathaway opened this Issue Jan 10, 2012 · 5 comments


None yet
4 participants

When using JQuery Mobile 1.0 with Respond breaks how JQM images are displayed (arrows on dropdowns, header icons, etc.). Respond is the last script loaded in the head tag.

When respond.js is removed, JQM works fine again.

I noticed the same.
This is the media query in the jQuery Mobile css which IE (7&8 - all modes) evaluates as true when using respond.js:

@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-resolution: 240dpi) {
// here the background-image source and size for HD/retina displays only

Because of this IE is loading the wrong background-image sprite and you don't get to see the icon images.
Easy to fix with an old IE specific rule afterwards, but would be nice if this could be solved. Thanks!

If it helps anyone, I went back to JQM1.0rc2 and the same problem still existed. The issue was introduced after JQM1.0b2.
Thanks for the info uGoMobi.

I'm also in this boat looking for rescue... Anyone looking for a dirty interim "cure", add this line with leading "#"

 #background-image: url(../custom-icons/icons-36-white.png);

scottjehl commented Jan 16, 2012

Thanks for the info, @ugomobi. sounds like an edge case in the regexp.

@scottjehl scottjehl closed this in 4450e5d Jan 27, 2012


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