Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Stupefyingly weird IE 9 Javascript bug: Altering doc title makes subsequent code execute

I don't understand this at all. Here is some Javascript code that works in every browser but IE 9. It is called from a Flash movie using ExternalInterface, and is meant to dynamically resize the movie in the DOM if the size of the movie changes internally

function vResizeFlash(swfId, ht) {
    document.getElementById(swfId).height = "100%";
    document.getElementById('flashContainer').style.height = ht + "px";
}

But it works fine if I alter the document.title:

function vResizeFlash(swfId, ht) {
    // IE 9 won't run the rest of this function unless
    // we go through the charade of changing the document title.
    if (navigator.appName.indexOf("Microsoft") != -1) {
       var docTitle = document.title.replace(/^(.+?)\s*$/,"$1");
       document.title = docTitle + " ";
    }
    // Well-coded browsers begin here
    document.getElementById(swfId).height = "100%";
    document.getElementById('flashContainer').style.height = ht + "px";
}

Here I simply trim any white-space from the right side of the document.title, then add a single white-space character to it. Suddenly the following lines get executed. Note: there are other ExternalInterface calls on the page, and all of them work fine, even in IE 9, so it's not a Flash/IE 9 problem.

I stumbled on the fix because I was altering the title to show the function arguments (as a quick debugging test), just to make sure the function was getting run. And suddenly the code worked. Take it out? Doesn't work. 100% reproducible.

Anybody know why this absolutely stupefying behavior takes place?

UPDATE

@c69 has posed the question: "Maybe its IE9's dead code remover?"

I didn't know about this, so I went and Googled and found this article on the topic, as well as some discussion of it elsewhere. I don't know enough about it to evaluate how this would affect a two-line Javascript function, however, especially since one of the lines does have a referent on the page (although it is late-loading through the SwfObject code). Still, it would be a pretty bad bug for a code "optimizer" to remove lines of code it deemed unnecessary because it doesn't understand how they are called. And if it did fail to understand how the lines are called, how does inserting a line making a bogus change to the document.title render that code suddenly "necessary"?

UPDATE 2

Another piece of the puzzle This may have something to do with IE 9's compatibility mode. The page starts out in IE 9's standards mode.

enter image description here

Now, if I turn on IE's compatibility mode,

enter image description here

the problem goes away without using the above hack. Turn it off, and the problem returns (if no hack present).

But when I tried to make a simple test using the exact same HTML (minus a couple of JSP tags) and a stripped down SWF that only contains the resize code and the tools to test, everything works fine. In that case, however, no compatibility icon is displayed at all.

enter image description here

We're using Tomcat 6.0.32. I'm not aware that we are using any special headers, and there are no meta tags regarding IE compatibility mode (in either the main app or in my test app).

like image 996
Robusto Avatar asked Sep 20 '11 21:09

Robusto


2 Answers

like InvertedSpear mentions, check your doc type out, i've had problems with IE9 recently and most of it boiled down to the Doc type tags triggering a compatability mode i didn't need, the same can be true of the meta tags so it might boil down to your Meta tags.

You can always impose a working compatibility mode using the links below too.

from: http://evolpin.wordpress.com/2011/02/25/ie9-compatibility-and-the-meta-tag/

I’ve discovered that this is indeed documented by Microsoft…

http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx

“The X-UA-Compatible header is not case sensitive; however, it must appear in the header of the webpage (the HEAD section) before all other elements except for the title element and other meta elements.”

like image 114
Charlie Avatar answered Oct 21 '22 15:10

Charlie


Whenever I see something like this happen in any language it's because there is other code that has a bug. As you pointed out your simple case doesn't produce the problem. Try removing other code a few lines at a time until the problem disappears - the last removed code should contain the problem.

Cheers

like image 40
Scott Avatar answered Oct 21 '22 13:10

Scott