IE7 not responding to child combinator ('>') when inside media query #21

Closed
weerd482 opened this Issue May 9, 2011 · 16 comments

Comments

Projects
None yet
7 participants
@weerd482

weerd482 commented May 9, 2011

Howdy Scott!

Not sure if this is something related specifically to respond.js or if it's a general issue w/ IE7.

IE7 has support for child combinators (element > element { styles here}), and seems to understand them well when I have them outside of the media queries, but any rules with combinators in media queries IE7 seems to ignore completely and I can only get it to understand the styles if I just use descendent selectors (I'd rather use the combinators because it'll eliminate the need for a bunch of arbitrary classes).

IE8 seems to understand the combinators just fine.

I'm still doing some testing, but I was wondering if you have happen to come across any similar issues while developing respond.js.

Thanks!

And thanks for your work on respond.js.

Best,

Diego

@scottjehl

This comment has been minimized.

Show comment Hide comment
@scottjehl

scottjehl May 12, 2011

Owner

Hmm. I haven't seen issues with this yet but it's possible. Would you mind creating a demo page? I'm happy to test.

Owner

scottjehl commented May 12, 2011

Hmm. I haven't seen issues with this yet but it's possible. Would you mind creating a demo page? I'm happy to test.

@pyrsmk

This comment has been minimized.

Show comment Hide comment
@pyrsmk

pyrsmk May 12, 2011

Hu... I don't remember well but I think I'd the same issue... I'd blamed selectivizr :D

pyrsmk commented May 12, 2011

Hu... I don't remember well but I think I'd the same issue... I'd blamed selectivizr :D

@weerd482

This comment has been minimized.

Show comment Hide comment
@weerd482

weerd482 Jun 9, 2011

Yeah, I had the issue show up on a dev site I was working on and ended up having to use modernizr's .ie7 class to declare more specific styles sans child combinators to IE7. Happened again on a different site (but it was using the same base code from the original site where I first encountered it). I'll set up a simple test page to recreate the issue, and make sure nothing else is causing the problem and post it up here when it's set.

Thanks for getting back to me.

Pyrsmk, selectivizr might cause a similar issue, but I wasn't using it in my site development. I narrowed it down to possibly being respond.js, by commenting out the code including the script and testing it out. But as soon as I set up the test page, it'll be easier to see first hand.

weerd482 commented Jun 9, 2011

Yeah, I had the issue show up on a dev site I was working on and ended up having to use modernizr's .ie7 class to declare more specific styles sans child combinators to IE7. Happened again on a different site (but it was using the same base code from the original site where I first encountered it). I'll set up a simple test page to recreate the issue, and make sure nothing else is causing the problem and post it up here when it's set.

Thanks for getting back to me.

Pyrsmk, selectivizr might cause a similar issue, but I wasn't using it in my site development. I narrowed it down to possibly being respond.js, by commenting out the code including the script and testing it out. But as soon as I set up the test page, it'll be easier to see first hand.

@dub

This comment has been minimized.

Show comment Hide comment
@dub

dub Jun 23, 2011

Selectivizr and Respond.js conflict. Possible solution: http://selectivizr.com/tests/respond/

dub commented Jun 23, 2011

Selectivizr and Respond.js conflict. Possible solution: http://selectivizr.com/tests/respond/

@pyrsmk

This comment has been minimized.

Show comment Hide comment
@pyrsmk

pyrsmk Jun 23, 2011

For @dub comment, the specific issue is here: keithclark/selectivizr#11

pyrsmk commented Jun 23, 2011

For @dub comment, the specific issue is here: keithclark/selectivizr#11

@dvelyk

This comment has been minimized.

Show comment Hide comment
@dvelyk

dvelyk Jun 25, 2011

I've also run into this issue--using Respond.js on its own (without Selectivizr).

The problem seems to be IE7. For whatever reason, the child selector only works for rules added to stylesheets that are already a part of the document. Currently, respond.js adds style elements to a document fragment and then appends this fragment to head, presumably for performance reasons. Change the applyMedia function to append each style element to head before its cssText is set, and the child selector magically works again. Whatever causes this problem in IE7 was fixed in IE8.

I'm not sure what the performance implications of this change might be for other developers. I use respond.js for screen media, so only a single style element is ever appended on resize--in this case, a document fragment wouldn't improve performance even if it did work in IE7.

Still, weird bug. Perhaps there are other workarounds?

dvelyk commented Jun 25, 2011

I've also run into this issue--using Respond.js on its own (without Selectivizr).

The problem seems to be IE7. For whatever reason, the child selector only works for rules added to stylesheets that are already a part of the document. Currently, respond.js adds style elements to a document fragment and then appends this fragment to head, presumably for performance reasons. Change the applyMedia function to append each style element to head before its cssText is set, and the child selector magically works again. Whatever causes this problem in IE7 was fixed in IE8.

I'm not sure what the performance implications of this change might be for other developers. I use respond.js for screen media, so only a single style element is ever appended on resize--in this case, a document fragment wouldn't improve performance even if it did work in IE7.

Still, weird bug. Perhaps there are other workarounds?

@scottjehl

This comment has been minimized.

Show comment Hide comment
@scottjehl

scottjehl Jun 29, 2011

Owner

weerd482: Can you check if this patch fixes this issue for you? I'm in the process of pulling it in. #35

Owner

scottjehl commented Jun 29, 2011

weerd482: Can you check if this patch fixes this issue for you? I'm in the process of pulling it in. #35

@weerd482

This comment has been minimized.

Show comment Hide comment
@weerd482

weerd482 Jun 30, 2011

Hey guys, I'd be happy to check to see if the patch works. I'm new to GitHub though (signed up so I could report the issue) and a little lost on how to best grab the patch and try it out. I'm reading up on using Git right now, so I'll figure it out as soon as I can, but if any of you can point me in the right direction it'd be much appreciated!

Hey guys, I'd be happy to check to see if the patch works. I'm new to GitHub though (signed up so I could report the issue) and a little lost on how to best grab the patch and try it out. I'm reading up on using Git right now, so I'll figure it out as soon as I can, but if any of you can point me in the right direction it'd be much appreciated!

@weerd482

This comment has been minimized.

Show comment Hide comment
@weerd482

weerd482 Jul 1, 2011

Ok, so I'm still a little lost on how to grab the respond.js with the potential fix for the child combinators via GitHub (still learning more about using GitHub), but I did finally get a chance to create a sample demo page so that I can illustrate the issue at hand. Feel free to grab the code and apply the patched respond.js. I explain a bit what it should look like in the text on the page and I also mention another issue I encountered as well (let me know if you want me to submit a different issue in GitHub for the other bug I enocunterd :)

http://diegolorenzo.com/respond/

Let me know if you have any questions and thanks again for keeping up with this!

weerd482 commented Jul 1, 2011

Ok, so I'm still a little lost on how to grab the respond.js with the potential fix for the child combinators via GitHub (still learning more about using GitHub), but I did finally get a chance to create a sample demo page so that I can illustrate the issue at hand. Feel free to grab the code and apply the patched respond.js. I explain a bit what it should look like in the text on the page and I also mention another issue I encountered as well (let me know if you want me to submit a different issue in GitHub for the other bug I enocunterd :)

http://diegolorenzo.com/respond/

Let me know if you have any questions and thanks again for keeping up with this!

@weerd482

This comment has been minimized.

Show comment Hide comment
@weerd482

weerd482 Jul 1, 2011

I figured out how to grab Elyk's version of respond.js and tried it out (sorry it took a while I'm still a GitHub noob). It seems to work! Might actually also resolve that second issue I mentioned. You can see the results here:

http://diegolorenzo.com/respond-fix/

But I had to used the non-minified version (respond.src.js). The minified version (respond.min.js) for some reason wasn't working and would throw an error. Looks like it's on the right track though!

Great work guys!

weerd482 commented Jul 1, 2011

I figured out how to grab Elyk's version of respond.js and tried it out (sorry it took a while I'm still a GitHub noob). It seems to work! Might actually also resolve that second issue I mentioned. You can see the results here:

http://diegolorenzo.com/respond-fix/

But I had to used the non-minified version (respond.src.js). The minified version (respond.min.js) for some reason wasn't working and would throw an error. Looks like it's on the right track though!

Great work guys!

@dawnbuie

This comment has been minimized.

Show comment Hide comment
@dawnbuie

dawnbuie Aug 22, 2011

That fix worked for me - I didn't realize it was the child selectors that were causing the layout problems in ie7! It was so frustrating - I'm glad I found this fix before wasting any more hours.

That fix worked for me - I didn't realize it was the child selectors that were causing the layout problems in ie7! It was so frustrating - I'm glad I found this fix before wasting any more hours.

@curtisj44

This comment has been minimized.

Show comment Hide comment
@curtisj44

curtisj44 Nov 23, 2011

This issue is still occurring. Any chance that the fix will be added?

This issue is still occurring. Any chance that the fix will be added?

@pyrsmk

This comment has been minimized.

Show comment Hide comment
@pyrsmk

pyrsmk Nov 24, 2011

@curtisj44: don't want to make any ad, but if you can't have your CSS working with Respond, you could test with mediatizr, I think there's no problem with '>' selectors

pyrsmk commented Nov 24, 2011

@curtisj44: don't want to make any ad, but if you can't have your CSS working with Respond, you could test with mediatizr, I think there's no problem with '>' selectors

@curtisj44

This comment has been minimized.

Show comment Hide comment
@curtisj44

curtisj44 Jan 6, 2012

I've put together a basic demo of this issue: http://dl.dropbox.com/u/8864275/respond/issue21.htm

I've put together a basic demo of this issue: http://dl.dropbox.com/u/8864275/respond/issue21.htm

@curtisj44

This comment has been minimized.

Show comment Hide comment
@curtisj44

curtisj44 Jan 17, 2012

Nice work. This issue is fixed now with v1.1.0 RC1: http://dl.dropbox.com/u/8864275/respond/issue21-1.1.0rc1.htm

Nice work. This issue is fixed now with v1.1.0 RC1: http://dl.dropbox.com/u/8864275/respond/issue21-1.1.0rc1.htm

@scottjehl

This comment has been minimized.

Show comment Hide comment
@scottjehl

scottjehl Jan 18, 2012

Owner

Great! Closing :)

Owner

scottjehl commented Jan 18, 2012

Great! Closing :)

@scottjehl scottjehl closed this Jan 18, 2012

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