Background Issues (ieretrofit.js)

All the problems I've run into up to now have been limitations of Blogger that I've been able to work around with template changes, CSS, javascript, etc.  But the problem I'm dealing with now is a lot harder to nail down.

Figure 1: Page without ieretrofit.js bug

The issue is that certain Internet Explorer configurations seem to have issues keeping the background colors/images of post elements straight when you use some Blogger templates (such as the "Picture Window" template I'm using).  The result is that the background for the various elements on my page all change to match the background of the page itself.  Leaving you with a very bland and often hard to read web page (refer to figures 1 and 2).

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.  :)