There have always been a lot of complaints from web developers about the current support of Internet Explorer 6 to the jQuery library (see this useful article for example). However, the standpoint of web developers is actually wrong, because they don't take into account the fact that browser implementors don't test jQuery (or any other JavaScript framework) when they build a new release of a web browser. jQuery works not because browsers support it but because jQuery's developers support a given browser and try to make jQuery work in such browser. In other words, jQuery works fine when the core implementation of JavaScript and the DOM is free of bugs or errors. Conversely, when a browser has some bugs in its implementation, these bugs will affect jQuery. This is the case of IE 6.
IE 6 has not been updated since 2001, with minor changes in 2004 with the release of the Service Pack 2. So we're talking about a really obsolete browser here. As such, IE 6 has a wide variety of problems with jQuery that I'd like to discuss here.
Animations and effects
Simple animations work fine in IE 6, though you might notice a general poor performance in their execution. On the contrary, complex animations are buggy for the major part. There are two main problems here:
- timers
- steps
For the first point, you should never give to IE 6 values greater than 1000 milliseconds, because such values can actually crash the browser, especially when the animations are nested. A typical scenario is when you have nested animations on document loading.
The second point, instead, is related to the single components that make up a jQuery animation. Each jQuery animation is made up of several steps. You should be aware of the fact that IE 6 can miss or jump some steps, thus resulting in a complete different effect. To mitigate this problem, you could use JavaScript timers to get more control over an animation, thus avoiding the use of the animate() method.
AJAX
As a rule of thumb, shorthand AJAX methods (such as get() or post()) should be used carefully with IE 6. Instead, you should always use the $.ajax() wrapper, because it gives you a full control over the AJAX request.
Dynamic CSS styles
IE 6 is affected by the hasLayout property in its CSS support. Simply put, when you apply a dynamic CSS style, the final effect might be buggy. Another problem is related to cascading and inheritance. IE 6 has many problems with specificity, especially when applied to style rules given through multiple CSS classes. A simple way to fix this problem is to use the !important statement combined with redundant descendant selectors.
Performance
IE 6 has a really poor performance in its jQuery support. To fix this problem, you should use DOM core methods and JavaScript native functions whenever it's possible. For example, instead of $.each() or .each(), you should use normal JavaScript loops which are implemented in C/C++ and are much faster.