IE 6 bug causes jQuery globalEval error

UPDATE: this is fixed in jQuery 1.2.6 and later, see ticket #2709.

After upgrading our code base to use the latest jQuery 1.2.3 (previously we were using 1.2.1) our testers discovered a quite ridiculous bug in IE 6 that caused jQuery to fail (IE 7 is fine, which is why we didn’t experience it development). The issue manifested itself as the script error message “Problems with this web page might prevent it from being displayed properly…

Line: 24
Char: 76
Error: Invalid Argument
Code: 0
...

…and various document.onready handlers not running.

Of course line 24, char 26 doesn’t really help much because IE always seems to get this a few lines out of whack and with the minified version of jQuery it would be way out. So I replaced the minified version jQuery.js with the uncompressed version, cleared the browser cache and re-visited the web app in IE 6. This then gave line 659, char 4 as the offending location:

image

After whacking in a several alert()s in the lines in the vicinity of 659, it turns out the issue is with head.removeChild(script) in the globalEval function, 4 lines up. Obviously.

So, why was head.removeChild failing? I put the following debug code in:

alert(head.tagName) // displays "HEAD" as expected
alert(script.parentNode.tagName) // displays "BASE" !!!

So, it transpires that our pages having a <base> tag within the <head> contributes to the issue. IE 6 seems to get totally confused as to the structure of the document HEAD when there’s a self-closing or unclosed BASE tag. BASE tags I suppose are quite rare and this is probably why this issue doesn’t appear to be commonplace. (The BASE tag is in there for legacy reasons in our code, but they’re also quite useful when you save the source of HTML pages they still pick up images and script from the originating server which is handy for debugging automatically-generated HTML.)

So, before, the offending base tag looked something like this:

<base href='http://example.com/blah' />

After some experimentation it appears IE6 doesn’t exhibit its odd behaviour if you do this instead:

<base href='http://example.com/blah'></base>

Job done.

Update: Chris Venus comments about the reason for the weird behaviour in IE6 and earlier. Previously <base> was interpreted as a container, which could appear multiple times in a document: different sections within the page could have different bases, so would logically end up wrapped within each <base> (now there’s a feature everybody wanted, right?). Because of this, <head> got treated as a “section” of the document and elements added to it ended up as children of any <base> it contained rather than siblings. See IEBlog: All your <base> are belong to us.

About these ads

11 Responses to IE 6 bug causes jQuery globalEval error

  1. -=N=- says:

    This is always what drove me nuts about web development — things like white space and whatnot that are supposed to be ‘non-impacting’ HAVING an impact depending on what (javascript, HTML, CSS) is being used and on what browser (and versions thereof).

  2. This post was a life saver for me. I was struggling with this for the entire day. And your post made all that worthwhile. Thanks a lot.

    Cheers
    Srini (nacnez)

  3. Chris Venus says:

    I realised the other day a while after you said about this that the problem occurs probably because of the legacy of how IE originally implemented base.

    It used to be that base wasn’t an attribute that applied to the page. It was markup that applied to the section it was enclosing. That meant that you could apply a different base element to different parts of the page.

    http://blogs.msdn.com/ie/archive/2005/08/29/457667.aspx

    That discusses it a bit more. Now *why* this caused the bug I don’t know but that must be why it was happening because it was trying to extend our base element to encompass a section rather than being standalone.

    You may have known this already but I thought it was interesting context to add to the main article. And also an explanation and reassurance that they fixed it for IE7. :)

  4. Well jquery 1.2.3 also shows similar behaviour on IE6 and trust me i dont even use a base, i have tried alot of things but i still get the error.

  5. Pingback: JQuery Global Error With IE6 « Corey Kimball

  6. LG says:

    You rock!

    L

  7. krick says:

    Thank you for posting this. You’ve allowed me to fix a long-standing bug with my Joomla powered website and IE6.

    This bug shows up in Joomla when you enable search engine friendly URLs. Enabling SEF causes it to emit a self-terminating BASE tag into the head of your page. If your Joomla template includes certain javascript files and they end up after the BASE tag, the bug shows up. In my case, it was this wowhead script…

    http://www.wowhead.com/?powered

    I made a post on how to fix it by editing one of the core Joomla files…

    http://www.tankadin.com/latest/ie6-can-t-be-trusted.html

  8. Nik says:

    Duncan, thanks so much for this.

  9. This bug is back in jQuery 1.3.2.

  10. Volomike says:

    This problem is occurring for me on IE8 with jQuery 1.3.2. It’s a bug in jQuery that rarely occurs and only with IE. In my particular case, I had an OBJECT with an EMBED inside in the page. My object had an ID of player, and my embed had an ID of player2. I then did this:

    var s = $(‘#player2′).html();
    $(‘#player2′).html(s);
    s = $(‘#player’).html();
    $(‘#player’).html(s);

    And that’s when this line 12 error occurred.

Follow

Get every new post delivered to your Inbox.

Join 36 other followers

%d bloggers like this: