IE11 Fancybox over iFrame Issue

Hello,

I wanted to report an issue and workaround for IE11 when you have an iframe on the page and try to pop-up a fancybox overtop. This type of configuration will leave the on-page iframe overlop the pop-up, see screen;

View post on imgur.com

This is a general IE issue that seems to have been around since IE6 where z-index is ignored by the on-page iframe causing it to overlap the pop-up. Info on the issue;
https://stackoverflow.com/a/12977151

Diving into the fancybox code I found there’s an isIE6 check which does inject the about:blank iframe into the fancybox-wrap div. As a test I just forced isIE6 to true so would inject the about:blank iframe on IE11. This was successful as seen here;

View post on imgur.com

I haven’t tested IE7-10 but would assume if the issue pertains to IE6 & IE11 it would affect all the rest in between.

Specifically, the portion of JS that should be enabled for ALL IE browser (I believe) is here (starting line 1120);

if (isIE6) {
	loading.addClass('fancybox-ie6');
	wrap.addClass('fancybox-ie6');

	$('<iframe id="fancybox-hide-sel-frame" src="' + (/^https/i.test(window.location.href || '') ? 'javascript:void(false)' : 'about:blank' ) + '" style="overflow:hidden;border:0" tabindex="-1"></iframe>').prependTo(outer);
}

I’m not sure if the other IE6 specific stuff in the JS needs to be enabled for all IE but would be worth testing.

Also when setting up the isIE condition doing a userAgent check on just /msie/i won’t work as IE11 is now identified as ‘Trident’.

Let me know how I can assist or clarify,
Cheers