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!!
Twitter
Facebook
Linkedin
Thanks for sharing such this kind of solutions.
It is working for my case.
:!: Thank you very much! It helps me!!!! :!:
oooooh :shock:
Thank you very much . This solved my problem too.
"Oh… And… DONT USE .html() to change content… EVER!!" VERY VALUABLE ADVICE
I add (Dear developer, you should go to pure Javacsript when ever possible even inside jquery)
Hey Jalal, I agree that in this case the .html() was trouble so in that respect I agree!
However, you should NOT fall back to pure javascript whenever possible, this will cause you serious problems. jQuery is a library that makes your code neater, and allows it to work cross browser more naturally without the worry of browser quirks. You should ALWAYS use jQuery where possible if your using the library else what is the point using it at all?
I have a similar issue... in IE8
Unfortunately, your solution above doesn't seem to help my case.
I have an LI that I'm inserting dynamically via ajax call into the UL. I can see the response come back with a simple alert(response).
But the CSS on the LI being returned is causing issues with the Rendering in the Browser, if I remove the CSS all is fine.
On Success:
alert(response);
$('#stuffList li.stuff:last').after(response);
Example CSS:
ul.grid .subgridcontainer {
height:280px;
display:block;
width:auto;
float:none;
position:relative;
margin-top:10px;
margin-bottom:10px;
padding:10px;
cursor:default;
}
:twisted:
Any Ideas?
Thanks