Permalink
Browse files

Adding test for IE9 in iframes

Internet Explorer 9 supports css3 media queries, but not within frames
(this appears to be a bug in IE9). Modifying this script to check for
IE9 and check if within iframe and run if true.
  • Loading branch information...
drywall committed May 16, 2012
1 parent b21c578 commit 1c86c66075f0a2099451eb426702fc3540d2e603
Showing with 11 additions and 3 deletions.
  1. +1 −1 README.md
  2. +1 −1 respond.min.js
  3. +9 −1 respond.src.js
View
@@ -4,7 +4,7 @@
- Copyright 2011: Scott Jehl, scottjehl.com
- Dual licensed under the MIT or GPL Version 2 licenses.
The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable [responsive web designs](http://www.alistapart.com/articles/responsive-web-design/) in browsers that don't support CSS3 Media Queries - in particular, Internet Explorer 8 and under. It's written in such a way that it will probably patch support for other non-supporting browsers as well (more information on that soon).
The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable [responsive web designs](http://www.alistapart.com/articles/responsive-web-design/) in browsers that don't support CSS3 Media Queries - in particular, Internet Explorer 8 and under (and IE9 when inside a frame). It's written in such a way that it will probably patch support for other non-supporting browsers as well (more information on that soon).
If you're unfamiliar with the concepts surrounding Responsive Web Design, you can read up [here](http://www.alistapart.com/articles/responsive-web-design/) and also [here](http://filamentgroup.com/examples/responsive-images/)
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -42,7 +42,7 @@ window.matchMedia = window.matchMedia || (function(doc, undefined){
respond.mediaQueriesSupported = win.matchMedia && win.matchMedia( "only all" ).matches;
//if media queries are supported, exit here
if( respond.mediaQueriesSupported ){ return; }
if( respond.mediaQueriesSupported && !isIE9iframe() ){ return; }
//define vars
var doc = win.document,
@@ -323,4 +323,12 @@ window.matchMedia = window.matchMedia || (function(doc, undefined){
else if( win.attachEvent ){
win.attachEvent( "onresize", callMedia );
}
//test for IE9 iframe
function isIE9iframe() {
var ua = navigator.userAgent,
ie_version = -1;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null) ie_version = parseFloat( RegExp.$1 );
return ( window != window.top && ie_version >= 9.0 );
}
})(this);

5 comments on commit 1c86c66

@davidefassola

This comment has been minimized.

Show comment
Hide comment
@davidefassola

davidefassola Oct 18, 2012

Works fine for me.
Thanks.

davidefassola replied Oct 18, 2012

Works fine for me.
Thanks.

@leslc

This comment has been minimized.

Show comment
Hide comment
@leslc

leslc Aug 6, 2013

Thanks, this saved me hours of random debugging!

leslc replied Aug 6, 2013

Thanks, this saved me hours of random debugging!

@drywall

This comment has been minimized.

Show comment
Hide comment
@drywall

drywall Aug 6, 2013

Glad this has been of use to someone other than me.

drywall replied Aug 6, 2013

Glad this has been of use to someone other than me.

@rbev

This comment has been minimized.

Show comment
Hide comment
@rbev

rbev Jun 26, 2015

This worked for me temporarily when just changing my .js and refreshing.
As soon as i reset the browser the problem comes back

rbev replied Jun 26, 2015

This worked for me temporarily when just changing my .js and refreshing.
As soon as i reset the browser the problem comes back

@Tahiche

This comment has been minimized.

Show comment
Hide comment
@Tahiche

Tahiche Mar 10, 2017

Thanks!!. This was driving me nuts. Dreadful IE9.
Was openening a lightbox iframe and it would destroy the whole layout, not only iframe but top window. Funnily, it wouldn´t happen with Developer Tools open which meant it was impossible to debug. My guess is IE9 applied the media-query CSS according to the size of the "active" window, so as you moved the mouse it would switch from top (big) to iframe (small) and just go crazy.

Tahiche replied Mar 10, 2017

Thanks!!. This was driving me nuts. Dreadful IE9.
Was openening a lightbox iframe and it would destroy the whole layout, not only iframe but top window. Funnily, it wouldn´t happen with Developer Tools open which meant it was impossible to debug. My guess is IE9 applied the media-query CSS according to the size of the "active" window, so as you moved the mouse it would switch from top (big) to iframe (small) and just go crazy.

Please sign in to comment.