IE8 Not Loading BackboneJS/LessCSS Application

February 1 2013 by B-Drive in Uncategorized |No Comments

Kinda funny — we have a new application and none of us were testing it in IE8!  Sound familiar? 🙂

The application wouldn’t load at all, not at all, in IE8. Debugging was tedious with the IE8 debug tool.

Our specs are pretty up to date but IE8 is still on the table for our customers.  The headless testing isn’t set up with any IE instances to cover this either. The UI piece is Backbone, Require, Underscore, JQuery, and Less.  All tried javascript technologies.

Fix the Tests
First, I noticed none of the QUnits ran in IE8.  So tracing it back, I noticed there was a library someone had put into the applications Require configuration, but not in the test config — and that did the trick.  For whatever reason it worked in the other browsers.

Fix the Application
Next, the application wasn’t loading at all in IE8 at runtime.  I had to do three more things to get it working:

1.  Move a console.log patch to load with the application — IE8 can’t do console.log unless its debugging and developers were putting them all over in the code. This technique is well documented on StackOverflow and other sites. Looks like this:

//mock_log_console.js
if (typeof ( console ) !== 'undefined' && console != null) {

} else {
    console = {
       log:function () {
           //alert("log"); //if you want, I usually do not
       },
       warn:function () {
       },
       error:function () {
    }
  }
}

Make sure this script is called before everything else in your index.html or whatever:

<script type="text/javascript" src="mock_log_console.js"></script>

2. Change the doctype. We had

<!DOCTYPE html>

but it was causing IE8 not to load the page, so I put in this, that seemed to solve it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3. IE8 was hating it when we set the type as follows:


<script type="application/javascript"></script>

So “type=’application/javascript’ “had to come out — nothing set now at all.

Closing
Debugging and fixing consisted of:

  1. Making sure the right libraries got loaded.
  2. Checking the syntax compliancy of the code to IE8 specs — for instnace, console.log(), DOCTYPE and acceptable script properties.
  3. A lot of elbow grease.

On other environments, Less is already compiled — but continues to be a problem loading slow and needed refreshes for IE8 when resolving at runtime.  We decided there was nothing we could do to solve this, except point at optimized CSS files at the right time.  There are ways of compiling everything but what you are woking on too.

Again, elbow grease.  Who ever said this shit gets any easier?

Comments are closed.

« »