What's This Do?

Programming etc.

Snippet of the Week: Die IE7

Scroll down to get stuck into some cringe-worthy code…

IE 7, the equally-ugly offspring of IE 6, is still alive and kicking; at least, according to our usage data. A recent project, basically a public web application for marketing and account access, brought about a big focus on browser compatibility.

There are heaps of great tools available to help casual and professional web developers alike:

  • Modernizr is a JavaScript library which provides feature detection, media queries and polyfills to attempt to provide HTML5 and CSS3 features for non-compatible browsers.
  • jQuery and the accompanying UI and Mobile libraries simplifies common JavaScript tasks and improves browser compatibility.
  • CSS3 PIE provides CSS3 decoration features for IE 6-9.
  • and there are heaps more!

There’s a known bug in Internet Explorer 7 which is effecting the aforementioned project. Occasionally, a page will not be rendered by IE 7, instead showing a blank white screen. All the elements appear to have loaded and have been laid out correctly; elements are detected as you move the cursor around. When the user refreshes the page, the markup is usually rendered correctly and will continue to be as long as the page and various extra artifacts are cached.

I would have loved to have dismissed this error for a number of reasons. Firstly, the bug is known to Microsoft and a solution is available! All you have to do install a service pack, and the error should go away. Or, even better, how about you ditch IE 7 altogether and get Opera, Chrome, Firefox or even Safari. At the very least, upgrade IE to a more recent version.

Secondly, when it comes to outdated browsers I tend to be a bit of a hard-ass. My personal philosophy for public websites: if it doesn’t work in older browsers, despite the use of polyfills, then forget about the older browser. This doesn’t mean you can be lazy; you still need to worry about mobile browsers, which are steadily rising in usage, but you can flip off IE 5, 6 & 7, as well as older versions of the other major browsers.

Unfortunately, I had no such luck with this website. The client, which shall not be named, has a SOE which includes IE 7. During testing, they discovered the “blank screen” bug mentioned above, but cannot do anything on their end to fix it; their tech support team will not patch the bug or let them install a different browser. So IE 7, while dwindling in real-world use (at least according to our own usage stats) still had to be supported so that the client could test it.

We needed a fix and the KB article provided a hint: if you refresh the page, it will render correctly. Of course, having the client do this manually while testing was not acceptable, we had to automate it. There were a few different ideas thrown about, but they all basically boiled down to this:

  1. Wait for the page to load
  2. Decide if the browser is IE 7 (if not, then stop)
  3. Check a state variable to see if the page has been loaded once before.
  4. If the above variable is set, then stop.
  5. Set the variable.
  6. Force a refresh.
  7. Go back to step one.

The first idea was to store the “refreshed” variable in the query string, but we didn’t want to have to maintain this value across redirects, links and form posts. The second idea was to store it in a hidden field and then force a form submit, causing the page to reload. We actually tried this, but it didn’t work; IE 7 would sometimes not consider this to be a proper refresh.

The third idea is the one that worked, albeit in a vomit-inducing fashion. The following code snippet is bad, bad, bad but turned out to be a necessary evil in our case.

<script type='text/javascript'>
    var RELOAD_COOKIE_NAME = "GETABETTERBROWSERPLEASE";
    function reloadWithCookies() {
        var c = getCookie(RELOAD_COOKIE_NAME);
        if (!c || c === "reload") {
            setCookie(RELOAD_COOKIE_NAME, c ? "noreload" : "reload");
            window.location.reload(true);
        }
    }

    /* include jQuery somehow (like with Modernizr.load!) */

    $(function() {
        if ($.browser.msie && $.browser.version.slice(0, 1) === "7") {
            reloadWithCookies(); //reload using the cookie method
        }
    });

    /* Omitting implementation of getCookie and setCookie. */
</script>

Feel sick yet? So did we! The above code simply checks if the page has been reloaded yet. It actually refreshes the page twice, because we found that one refresh was sometimes not enough; two refreshes have so far been working 100% of the time.

Not only does this solution make me squirm, it has ruined a website which was, to my estimation, very browser-compatible. It even looked alright in Lynx! JavaScript is optional, CSS3 is optional and cookies are optional (and client-side cookies not required). But if you’re using IE 7, without client-side cookies or JavaScript, and without the appropriate hotfix, then you will get blank screens… until you press the refresh button, that is.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 189 other followers

%d bloggers like this: