Fancybox 2 Forcing Responsive Media Queries in IE

5
votes

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!

1
internet-explorer-9fancyboxfancybox-2
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). - JFK
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. - lxndr
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. - JFK

1 Answers

13
votes

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.