Comments on: IE javascript bug is kicking my ass

Question: IE javascript bug is kicking my ass

Paragon — Thu, 19 Jun 2008 16:06:40 -0800

Javascript/CSS and IE6/7: content called from a javascript file (a modified form of fontSizer) into an otherwise blank div appears and disappears intermittently in IE6/7. Help a newbie!

I know enough Javascript to just squeak by, but this bug is bugging the hell out of me. The content written from a .js file (images and text) appears every time in Firefox but only sometimes in IE6/7. Sometimes a page reload will reveal it, sometimes returning to the page from another page on the site will reveal it.

My first guess was the peekaboo bug, but none of the fixes work and if I disable the pages' css the content still appears/disappears the same way.

The pages in question are still in development (i.e. not live), so MeFi Mail me for a URL.

Any ideas or suggestions on how to debug this are gratefully welcomed!

By: Pinback

Pinback — Thu, 19 Jun 2008 17:48:20 -0800

I've seen this happen, but never did sort it out to my satisfaction. IIRC, it's due to an IE6 (& presumably 7) interaction between DOM events and body events.

Have you got multiple addDOMLoadEvent calls (i.e. calling the same or different functions several times for different DOM objects)? Does it work when you call the function from a <body onLoad="..."> event?

(I'm off to uni - yay, exams! - so someone else will have to help further.)

By: Paragon

Paragon — Thu, 19 Jun 2008 18:39:48 -0800

There was an addDOMLoadEvent call for that function in the .js file, so I moved it to a body onLoad and it worked nicely! It did, however, shut off another function - which was using an addEvent(window, 'load') call - so I moved that into the body onLoad as well.

Short term solution, thank you Pinback! Long term solution, do I need to put every onLoad event into the body tag directly, and call none of them via other means? I don't really want to play what-event-has-been-shut-down tag with IE. Does this bug have a name - is there a summary somewhere online for it?

By: moift

moift — Thu, 19 Jun 2008 22:31:03 -0800

I haven't run into this particular problem, but I know IE treats elements added by DOM differently than elements with other sources, and to overcome some bugs you can force it to re-evaluate a section of the document by touching it with the "HTML-mode" methods.

So, if adding some_dom_el is causing problems, try, after appending everything with DOM,

some_dom_el.parentNode.innnerHTML += '';

It seems completely stupid, but I've seen this miraculously fix a bunch of IE6 quirks.

By: moift

moift — Thu, 19 Jun 2008 22:32:11 -0800

Oops, I meant innerHTML there.

By: Pinback

Pinback — Fri, 20 Jun 2008 17:10:44 -0800

Well, like I said when I encountered it I never did sort it out to my satisfaction...

Without knowing all the details of the different events your trying to trap, the event handler functions you're calling, and at what point they're being called, I can't really add any more except to say that your other addEvent(window, 'load') is exactly the same as <body onLoad(...)> when you're not using frames - but it seems the body version takes precedence & can't be replaced/stacked if it exists.

It was 6~7 years ago, about the time IE6 was released, that I encountered this - which also BTW pretty much predates people giving names to DOM & CSS bugs/workarounds - so sorry, no, I don't remember any links to summaries, explanations, or workarounds. IE compatability was/is very much a distant second concern for me so I tend to just give up, make sure it works in FF, and exclude any DOM manipulation fanciness from IE altogether.

By: Paragon

Paragon — Fri, 20 Jun 2008 19:22:12 -0800

Thanks very much for your help, guys. I guess I was plugging too much external code in without seeing whether they would conflict with each other somehow.

Also, I hope your exam went well!