Fancybox 2 Forcing Responsive Media Queries in IE

Question

I am building out a really small fancybox 2 modal that pops up with an iframe inside it that displays a little text and whatnot. However, the QA team going over this build have noticed that its forcing the site to think the max width is 480px for the window, which blows down the site to the responsive media-query I've built.

This does not happen in IE10, Chrome, or Firefox. It also does not happen in IE9 Emulation. I have IE10 and can not replicate it in any version/move of IE but I can see it happen on every computer with IE9. Since I can't replicate I have a little bit of a tough time finding the issue. Is there any known bug or issue with Fancybox that may be causing this?

Thanks for your help!

Graven

I don't think so (don't recall any known issue)... I would rather bet is a design bug on your side but hard to say without a link. How come the QA team noticed the issue? (if you cannot replicate it, ask them how ;) ... On the other hand, if you open a responsive page in fancybox using iframe with a width of 480px- of course the media query will be triggered (inside fancybox but not in the parent page). – Calendre

The media query is being executed on the parent, not in the iframe. I'm trying to get a link I can show you that isn't authenticated. They were able to find it because they have Native IE9 while I have Native IE10. I'm confused about it being a design bug because I have no errors, no validation errors, or anything that is worth noting and it works perfectly fine on all other browsers. That is why I thought there might be a bug for fancybox itself, or a bug in the way I implemented it. – Graven

I have native IE9 whenever you have a link ready ... regarding errors, IE is less tolerant then other browsers ...small syntax errors can be overlooked by others but not IE. If there is a bug in your implementation, we'll never know without code or link. – Calendre

Answer 1

Same issue, you have to change yours css' urls into your iframe, for example with GET.

Ex :

Parent :

<link rel="stylesheet" href="http://url.css" /> or 
<link rel="stylesheet" href="http://url.css?v=X" />

Iframe :

<link rel="stylesheet" href="http://url.css?v=Y" /> or 
<link rel="stylesheet" href="http://url.css?v=X&f=1" />

Bug is in cache manager of IE9. Media Queries of your css on iframe is "reloaded" on your parent, if url of css is exacly the same.

Cypripedium

Sorry for the delay on accepting this - this will work out just fine, but unfortunately due to time constraints I was forced to build my own little modal that just read a click event and changed the display attribute of a hidden box that I positioned in the center of the page. Thanks for answering, though! – Graven

I really hoped this would work for me but alas it did not. My issue has IE9 believing that the width of the window is the width of the dialog box and so it incorrectly applies the media queries. – Photochromy

Please give us an url where we could look. – Cypripedium

Or you can just have your iframe page load a copy of the parent's stylesheet(s) that have different filenames. – Fireside