Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fancybox 2 Forcing Responsive Media Queries in IE

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!

like image 796
lxndr Avatar asked Dec 18 '12 17:12

lxndr


1 Answers

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.

like image 77
John Avatar answered Sep 29 '22 11:09

John