When Browser Feature Detection Fails - ΩJr. Software Articles and Products

This information lives on a web page hosted at the following web address: 'https://omegajunior.globat.com/code/'.

In every javascript-heavy application we produce, feature detection determines what a browser can do. Why did MSIE 8 fail to fail the detection of the HTML5 canvas element?

A.E.Veltstra
Sunday, December 28, 2008

Hallvord R. M. Steen just published a blog post on his blog 'Miscoded' about how browser sniffing breaks in Opera 10, because web developers didn't think past the 1st digit. I thought: hey, I don't use browser sniffing except for detecting MSIE, and then let MSIE do the detection itself using conditional comments. Instead, I use feature detection. My scripts should be fine. Right?

Wrong.

In the Canvas application we discussed a few weeks ago, and in every other javascript-heavy application we produce, feature detection determines what a browser can and can't do. Almost anything is checked before using it. Including the ability of the browser to create an HTMLCanvasElement.

MSIE doesn't support the Canvas functionality yet. Not even in version 8 beta 2. The competition, obviously, does, for better and for worse. Some browsers have an awful implementation. Maybe MS thinks it's better to wait with publishing their Canvas support until their development nears perfection.

So, MSIE doesn't support the Canvas element. As a result, what do I expect from the execution of the following in MSIE?
var c = document.createElement('canvas');

I expect an 'undefined', or a false, or a null. Anything except an HTMLCanvasElement. Guess what MSIE 8b2 does?

No, I said: Guess.

Well, OK, I'll spill the beans. MSIE 8b2 creates a new HTMLCanvasElement. It doesn't have Canvas support, but it will still create the element.

So here we are, with an HTMLCanvasElement, but without a context, or any predefined properties, apart from it being an element node.

Our feature detection was based on the ability of the browser to create the HTMLCanvasElement. We assumed that any browser that doesn't support the Canvas functionality, would also refuse to create that element. We would detect that, and hand it an image element instead. We were wrong.

Now we have to switch our detection to something else. Like the ability to get a 2d-context. Oh wait... we did that already, which is why our scripts didn't break anywhere. We just ended up with emptiness where an image should have appeared.

Thank you, Microsoft. Not.

Need problem solving?

Talk to me. Let's meet for coffee or over lunch. Mail me at “omegajunior at protonmail dot com”.