AJAX loaded content not visible in IE7 + IE8 with jQuery

There is a Mobile Optimized version of this page (AMP). Open Mobile Version.

Recently I have had a nightmare of a problem with an apparent rendering bug in IE7 + IE8 which had all the hallmarks of the “peakaboo bug”. Firstly, here is a quick explanation of my problem:

AJAX fetches content into an element on the page, in ALL other browsers this content appears and works normally as I would have expected, however in Internet Explorer 7 and Internet Explorer 8 the content would not appear in the page at all.
However upon debugging using the IE9 developer tools (having IE in 7/8 mode), the content still does not appear but when inspecting the DOM, you can see the content IS there but is somehow “hidden”, I quote hidden because no CSS property is controlling this state, and trying to show the content using various CSS tags does not make the content appear.

So after searching tirelessly for a solution and trying the well documented “zoom:1”, “position:relative” and many other possible solutions, only for nothing to work for me, I eventually came to the solution that it would never work… And added a clause to STOP IE7 and IE8 from using AJAX on my site.

BUT THEN…

FINALLY! I have found a solution, a very strange and weird solution I must admit!

I found out that changing:

$('#' + AAPL_content).html(output);

So that instead we use PURE JavaScript like this:

document.getElementById(AAPL_content).innerHTML = output;

Fix’s the problem and now IE7 and IE8 are functioning as expected, ALL of the time.

Moral of the story…

Never completely trust a JavaScript library to dig you out of the shit, always debug your code and try the impossible solutions as they can sometimes, surprisingly, be a possible cause.

Oh… And… DONT USE .html() to change content… EVER!!

Author: Dean Williams

I'm a Web Developer, Graphics Designer and Gamer, this is my personal site which provides PHP programming advice, hints and tips