jQuery & Browser Issues

During the time that I’ve been using jQuery (about a year now), I’ve run into three fairly significant browser issues. Between IE, Firefox, Safari, and Opera, Firefox is the only browser that I have yet to experience any issues with (related to jQuery, of course).

IE 7

In certain situations, jQuery’s $.browser.version will report IE 7 as version 6. Jamie Thompson noted one possible situation on his blog, but typically the issue is caused due to the fact that some copies of IE 7 included MSIE 6.0 within its user-agent string.

There is a jQuery Ticket open for the issue, but a solution has not been chosen. Based on some ideas that Jamie had, I came up with a possible solution by overriding the $.browser.version value:

jQuery.browser.version = jQuery.browser.msie && 
    parseInt(jQuery.browser.version) >= 6 && 
    window["XMLHttpRequest"] ? 
        "7.0" : 
        jQuery.browser.version;

Additionally, there are situations when I’m just looking for IE 6:

jQuery.browser.msie6 = jQuery.browser.msie && 
    parseInt(jQuery.browser.version) == 6 && 
    !window["XMLHttpRequest"];

It appears that these issues were resolved in IE 8 (at least in the beta version), but until jQuery releases a “fix”, you’ll have to deal with unreliable browser version detection in IE 7, or use one of the suggestions above.

Opera 9.5

I discovered an issue getting the viewport height in Opera 9.5 while testing my rewrite of SimpleModal. It turns out that Opera, in an effort to follow standards, changed where it was storing the value for the viewport height…breaking the way jQuery was getting the value. Previously, the value was stored in document.body["clientHeight"], but in 9.5 it was moved to document.documentElement["clientHeight"]. There is also a jQuery Ticket open for this issue, and a patch has been added by Ariel Flesler.

For SimpleModal, I’ve added code that will fix the issue until it is fixed in jQuery:

// fix a jQuery/Opera bug with determining the window height
var h = $.browser.opera && $.browser.version > "9.5" && 
    $.fn.jquery <= "1.2.6" ?
        document.documentElement["clientHeight"] : 
        $(window).height();

Safari 3 (Windows)

This is the smallest of the three issues, but annoying none-the-less. Take the following example:

$("<div/>").css({
    background: "#336699",
    color: "#fff",
    padding: "8px",
    width: "200px"
}).html("Loading...").hide().appendTo("body");

In Safari, the “loading” element will be visible when the page loads. In all other browsers, it is hidden (display:none). The issue occurs because the jQuery hide() function is supposed to look for “visible” elements and set the CSS display property to ‘none’. However, in Safari, it appears that an element not yet in the DOM, already has a display property of ‘none’…which sounds fine, right? It’s not! Since it fails the visibility test, jQuery does not explicitly set the display property to “none”.

Then, once the element is added to the DOM, it appears that Safari sets the elements display property to ‘block’. So even though the intention was to have it “hidden”, due to a Safari quirk (and lack of a jQuery internal solution), the element will be visible.

As I’m sure you’ve guessed by now, there is a jQuery Ticket open, but the suggestion is to just change the way you use jQuery. One suggestion is to move the .hide() after the .appendTo("body"). My problem with this is that it introduces the possibility of a flicker on the screen as the element is added and then hidden. The workaround I am using is to manually set the display property on the element:

$("<div/>").css({
    background: "#336699",
    color: "#fff",
    display: "none",
    padding: "8px",
    width: "200px"
}).html("Loading...").appendTo("body");

That concludes my notes about three browser issues I’ve encountered while using jQuery. If you’ve run into any issues where you’ve had to use a workaround, or have any other suggestions for the workarounds I used, feel free to mention them below!

And the moral of the story…use Firefox! 🙂