jQuery and IE8: developing and debugging

jQuery officially still supports Internet Explorer 8, but according to my personal experience not all of the features offered by jQuery work correctly on this browser. IE8's major goal was to finally provide a complete CSS 2.1 support, with minor improvements on its core JavaScript support. This means that most of the effects and routines that work smoothly on other browsers are partially broken or misinterpreted on IE8.

Animations

An animation is properly rendered when a browser's engine is able to actually run all the mathematical calculations used in the animation in a reasonable amount of time. High-performance browsers such as Chrome and Safari can run jQuery animations in a smooth and fluid way. On the contrary, browsers with a poor JavaScript performance tend to make the animation clunky. This is the case of IE8.

The first thing you need to consider are time intervals. IE8 can deal with short or medium intervals pretty well, while it shows some problems with longer intervals. 500 or 700 milliseconds are generally well supported, but from that point on you might notice some unexpected side effects, such as an element whose horizontal movement is too slow or unusually slowed down.

On fading animations, longer intervals may sometimes crash the browser, mainly when specified on page loading by using the ready() event. If you use PNG images with the alpha channel and the fadeIn() or animate({opacity: 1}) methods, IE8 will first show your image with a thick black outline which will progressively disappear once the animation is complete.

Using easing algorithms different from the default swing and linear is always a risk, because these algorithms are often complex. I also noticed that on sliding movements you can achieve a smoother effect by using the linear easing algorithm, which is the simplest to calculate.

IE8 doesn't support the toggle value on the animate() method when applied to certain CSS properties. If you use this value, IE8 will return an error.

Events

jQuery lately introduced some new event methods to its core. However, only the following event methods are proved to still work reliably:

1. click() and other similar methods, except load() on images
2. bind(), unbind()
3. trigger(), triggerHandler()
4. live(), die()

Even if jQuery claims that other events work correctly on IE8, I recommend to stay on the safe side and code defensively.

DOM and performance

When you have to create large amounts of HTML contents, you should always avoid to use the html() method on IE8 and use innerHTML instead. Another thing you can do when you loop through a large collection of elements is to use built-in JavaScript loops instead of jQuery's each() and $.each() methods:

// Turn a jQuery set into a DOM NodeList

var $li = $('li', '#content').get(),
    len = $li.length,
    i;
for( i = 0; i < len; ++i ) {
	// Turn a DOM node into a jQuery object
	var item = $($li[i]);
}

This approach works faster in IE8. Here's how you can do with innerHTML:

var element = $('#list')[0]; // DOM element
var arr = [];
var i;

for( i = 0; i < 10000; ++i) {
	arr[i] = '<li>Test</li>';
}
element.innerHTML = arr.join('');

Using arrays instead of string concatenation works faster in IE8.

Debugging

You need to install a developer toolbar on IE8 to track down all the possible problems you may encounter. IE8's default JavaScript console is totally unreliable due to its vague and confusing messages.

First, validate your markup. There are many so-called bugs that are actually due to malformed HTML, so the first thing you need to do is to make sure that your HTML structure is valid.

Second, validate your CSS. If you use animations, this is particularly important. Make sure that your CSS styles don't interfere with your jQuery code. To do so, take a look at your toolbar to the computed styles applied to your elements.

Third, check your JavaScript code. Your code must not contain errors and the syntax of the jQuery methods you're using must be correct.

Fourth, create a minimal test case by isolating the portion of code that causes errors in IE8 and reproducing it on a separate document. If the problem is gone, then it must depend on other portions of your code on the original page.

If the problem persists, the best thing you can do to spare some time is to run a search on the web for help. Try first Stack Overflow.