Search code examples
jqueryinternet-explorer-8requirejsrespond.jsselectivizr

Selectivizr IE8 White screen of death

I'm using Respond.js and Selectivizr for IE8 media query and CSS3 property support. Unfortunately it causes this famous white screen of death...

When removing the selectivizr script it's working fine. I searched through stackoverflow and found some workarounds that didn't work for me.

What I've tried:

  • Loading Selectivizr before Respond.js
  • Updated both libraries to the newest version
  • Remove other libraries/plugins
  • <meta http-equiv="X-UA-Compatible" content="IE=8" />

What I'm using:

  • jQuery
  • Respond.js
  • Selectivizr
  • Modernizr
  • Require.js

HTML:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="lt-ie9 lt-ie8 lt-ie7 no-js"> <![endif]-->
<!--[if IE 7]>         <html class="lt-ie9 lt-ie8 no-js"> <![endif]-->
<!--[if IE 8]>         <html class="lt-ie9 no-js"> <![endif]-->
<!--[if IE 9]>         <html class="ie9 no-js"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js"> <!--<![endif]-->

<head>
    <title><?php echo $portal_name . " " . $pageTitle; ?></title>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="apple-touch-icon" href="/images/global/apple-touch-icons/<?php echo $portal; ?>-touch-icon-iphone.png" />
    <link rel="apple-touch-icon" sizes="76x76" href="/images/global/apple-touch-icons/<?php echo $portal; ?>-touch-icon-ipad.png" />
    <link rel="apple-touch-icon" sizes="120x120" href="/images/global/apple-touch-icons/<?php echo $portal; ?>-touch-icon-iphone-retina.png" />
    <link rel="apple-touch-icon" sizes="152x152" href="/images/global/apple-touch-icons/<?php echo $portal; ?>-touch-icon-ipad-retina.png" />
    <link rel="stylesheet" href="/css/<?php echo $portal; ?>.css">
    <script src="/js/vendor/modernizr.custom.min.js"></script>
    <script src="/js/vendor/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
    // add specific class to html when windows
    if (navigator.appVersion.indexOf("Win")!=-1){
        $('html').addClass('win');
    }

    // add specific class to html when chrome
    if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1){
        $('html').addClass('chrome');
    }
    </script>
    <!--[if lt IE 9]>
        <script type="text/javascript" src="/js/plugins/jquery.selectivizr.min.js"></script>
        <script type="text/javascript" src="/js/vendor/respond.min.js"></script>
    <![endif]-->        
    <script async data-main="/js/app" src="/js/vendor/require.min.js"></script>
</head>

Any suggestions how to solve this?

Solution

  • I don't came up with an accurate answer but it seems like Selectivizr doesn't work proper in combination with Respond.js. Removing Selectivizr solved it for me..