Quick and dirty webpage with topics related to the Media Queries Polyfill respond.js

Links to test documents (situation 30.1.2012)

  1. Standard test page, same origin : IE8:OK, IE7:OK, IE6:OK
  2. Standard test page, same origin, with type="application/javascript" : IE8:NOK, IE7:NOK, IE6:NOK
  3. Test page, same origin plus CDN : IE8:OK, IE7:OK, IE6:OK
  4. Test page, same origin, with <base> tag : IE8:OK, IE7:OK, IE6:NOK
  5. Test page, CDN, without <base> tag : IE8:NOK, IE7:NOK, IE6:NOK - same origin security policy
  6. Test page, CDN, with <base> tag : IE8:NOK, IE7:NOK, IE6:NOK - same domain security policy
  7. Test page, same origin and CDN, with <base> tag : IE8:OK, IE7:NOK, IE6:NOK
  8. Test page, different origin (CDN Cloudfront), with proxy : IE8:OK, IE7:OK, IE6:OK
  9. Test page, different origin (CDN Cloudfront), with <base> tag and proxy : IE8:OK, IE7:NOK, IE6:NOK
  10. Workaround test page with polyfill for IE8 and specific CSS for IE7 and IE6 : IE8:OK, IE7:OK, IE6:OK
  11. Test page, same origin and CDN, with <base> tag and fix : IE8:OK, IE7:OK, IE6:OK

These documents were successfully checked as valid XHTML Mobile Profile 1.2. and valid CSS3

Links to test documents with fixes (situation 2.2.2012

These documents were successfully checked as valid XHTML Mobile Profile 1.2. and valid CSS3

Test Tools

I use the following tools to check the scripts with the Internet browsers IE8, IE7 and IE6 :

Findings

The problem generating a script error in IE6 when using the <base> can be solved by adding a closing </base>. This IE6 bug has been reported in stackoverflow.com:
"The <base> tag is in HTML documented as not having an end tag </base>. This causes a very specific bug in IE6: in its HTML DOM tree the entire content after the <base> tag is placed as child of the <base> tag. This can cause at first sight unexplainable problems in Javascript/jQuery/CSS, i.e. the elements being completely unreachable in specific selections (e.g. html > body) until you discover that one of its parents is the <base> tag. A normal IE6 fix is using conditional comments to include the end tag."
See test file 11 above.

Script respond.js is not working on IE when type="application/javascript" is specified
See test file 2 above. More informations on stackoverflow.com.

The CDN/x-domain setup for respond.js was not working on IE7 and IE6 when the <base> tag is used. See test files 7 and 9 and graphics 3 and 4.
This issue (#100 on Github) was fixed by DOCTYPER on February 2, 2012.

The following findings need further analysis :

Waterfalls

1. respond_cdn

Test File 5

[waterfall respond_cdn]

2. respond_base_sameorigin_cdn

Test File 7

[waterfall respond_base_sameorigin_cdn]

3. respond_cdn_proxy_base

Test File 9, IE8

[waterfall respond_cdn_proxy_base_ie8]

4. respond_cdn_proxy_base

Test File 9, IE7

[waterfall respond_cdn_proxy_base_ie7]

The files respond-proxy.html and respond.proxy.gif are not loaded with IE7.

5. Test File 9 with fix, IE7

[waterfall respond_cdn_proxy_base_fix_ie7]

The files respond-proxy.html and respond.proxy.gif are now loaded twice with IE7, same as with IE8 (see graphic 3).

Last update : February 2, 2012
Marco Barnig