2

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?

Kara
  • 6,115
  • 16
  • 50
  • 57
damian
  • 5,314
  • 5
  • 34
  • 63
  • Not use selectors that aren't compatible with IE8. Sure there are fancy selectors to do everything, but really you can easily do anything you want with a little extra DOM work and some new classes. And you won't require a javascript library to make your page load. – Steven Nov 08 '13 at 16:39
  • Really? I should stop using the awesome new stuff that brought us CSS3 because of IE8? I don't think that's the right way.. – damian Nov 08 '13 at 16:46
  • No what you should be doing is rather then including selectivizr you should be including another CSS file that fixes all the CSS3 stuff. If you look at http://selectivizr.com in the example there is even a fallback css. Plus user agent sniffing is a bad idea, you use Modernizer just stick with that. – Steven Nov 08 '13 at 17:01
  • agreed that all that ua sniffing stuff sucks, especially as you're already loading modernizr. – Spudley Nov 08 '13 at 17:04
  • A couple of other notes .... 1. Re `X-UA-Compatible` setting to IE8... that's definitely not going to help any. In fact, if anything, that'll screw it up for newer IE versions as well. And 2. You don't need HTML5 Shim if you're using Modernizr, as Modernizr includes the whole of the html5 shim inside of it. – Spudley Nov 08 '13 at 17:17

1 Answers1

3

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..

damian
  • 5,314
  • 5
  • 34
  • 63
  • 1
    I found [this question](http://stackoverflow.com/questions/5288771/why-is-selectivizr-js-causing-white-screen-of-death-in-ie8) but none of its proposed solutions helped me. The only thing that worked was removing Selectivizr. – Ben Saufley Dec 30 '13 at 15:41