Figure 1: Page without ieretrofit.js bug |
Figure 2: Page with ieretrofit.js bug |
So far I can tell that the problem is caused by a javascript that Blogger runs on IE browsers to help display pages properly. (If you download the source HTML and comment out this script then the background appears normal)
If you view the source html for my blog or any other Blogger blog (not the template XML but the source of the page when you're viewing it) you'll see the following segment of code in the head section which loads up the suspect javascript:
<!--[if IE]>
<script type="text/javascript" src="http://www.blogger.com/static/v1/jsbin/2175052290-ieretrofit.js"></script>
<![endif]-->
The "ieretrofit.js" script they're loading has been minified so it's horribly difficult to troubleshoot even after you run it through a javascript beautifier. But I took a jab at it and here's what I have so far.
I noticed that the background appears normally until right at the end of the page load. But as I mentioned before, the script is loaded at the TOP of the page in the head section. I assumed they must be using some event trigger to run the script at the end of the page load instead. So, I started by narrowing down my potential problem code to segments that reference "onload", "addEventListener", or "attachEvent" and found this piece of code:
document.attachEvent && document.attachEvent("onreadystatechange", function() {
if (document.readyState == "complete") {
document.body.currentStyle.zoom != "10%" && Rf();
window.setTimeout(Vf, 1E3)
}
})
Notice that it's setting up a function named "Rf" to execute once the browser's readyState changes to "complete". This "Rf" function eventually calls a function named "$f" which is defined below:
$f = function(a, c, e, b, d) {
var h = Of[D(a)];
if (h == s) {
var j = fg + c.length;
h = new V;
h.element = a;
h.id = j;
Of[D(a)] = h
}
c[D(a)] = a;
if (e.F) h.F = r;
if (e.za()) h.required = r;
for (var l in b)
h.T(l, b[l], d);
h.f.backgroundColor = h.f.backgroundColor || a.currentStyle.backgroundColor;
if (a = Pf[D(a)]) a.parent = h;
h.na()
}
Wow. That's painful to look at, huh?.
I think I've further narrowed it down to the "T" function being called from the "h" object in the last lines of the code above, but I'm not certain of that. So, I'll spare you the pain of looking at the code for the "T" function.
But from what I've been able to figure out so far, I think they may be looking for elements with rounded corners, transparent backgrounds, etc. and playing with them in the DOM. (changing their style, moving them around, removing, replacing, whatever)
I've posted on Google's help forum to see if someone can give me a solution or maybe a pre-minified version of the ieretrofit.js script before I go any further. If not then I guess I'll be reverse enginering some minified javascript this weekend. (Oh joy!)
And before you ask - Yes. I have looked at other templates. But I guess I'm just to obsessive compulsive to let this go and hope that it doesn't crop again somewhere else. :)