Update #1: It just came to my attention that CSS3 Pie does in fact continue to work in IE9. I quickly skimmed through the source code but couldn’t find out why their code would still function. If any CSS3 PIE reads this, please get in touch! Maybe not all hope is lost, after all. Nope. CSS3 Pie faces the same issues.

Update #2: Decided to lower profanity a little to enable more sharing (yes, I find it equally strange but some people don’t like to widely share blog posts with profanity, and this needs attention). If you love profanity, Google’s cache is your friend :-)

I’ve written only good things about IE9 before. It’s time to rant. Let’s talk about the issue at hand.

I helped Internet Explorer to be a little more sexy in the past by creating Transformie in 2008, a JS-based CSS polyfill that brings CSS Transforms to IE6+. Hell, I even gave talks titled “Internet Explorer 6 – The good parts”. I’d say I’m pretty knowledgeable with even the most well hidden IE features (did you know about updateInterval? No? Thought so.), and spend weeks crawling the MSDN. One of the features I used in Transformie is the pretty awesome propertychange event. What does it do? From MSDN:

Fires when a property changes on the object.

Pretty nice, huh? It’s the non-standard MS alternative to DOMAttrModified, and it worked pretty damn well. Yes, it worked so well that it allowed you to be notified when individual CSS properties and values changed – even when those properties or values where unknown to the browser.

In fact, Internet Explorer used to be more awesome than all other browsers in this regard. Ever tried to build a complete JS-based CSS polyfill for other browsers? Well, you can’t. Every other modern browser discards any unknown CSS properties in stylesheets and inline styles. So say you wanted to implement CSS Transforms in Firefox 3.6, you’d be stuck – there’s no way to parse “transform” values from stylesheets or track them on inline styles. It’s pretty unfortunate.

Lucky enough, I only set out to fix Internet Explorer, and IE transform” through onpropertychange (and style queries in JS). All I needed, problem fixed, moved on.

Meet Internet Explorer 9.

IE9 has pretty good CSS coverage, but still doesn’t support a fair range of new CSS3 wizardry. CSS Transitions? Nope. CSS Animations? Nope. IE10 will provide most of it, but IE9 has a significant user base that continues to grow. It needs fixing – it needs polyfills. So I invested some time to isolate the property- and stylesheet-tracking portion of Transformie to create a new standard library that helps developers create CSS polyfills for all Internet Explorer versions. This worked out pretty well, until I started migrating the live-tracking feature depending on propertychange. Here are the observations:

What’s wrong with propertychange on IE9?

  1. IE9 doesn’t fire non-standard events when binding them through addEventListener. Every modern JS library that uses feature detection, including jQuery, will fail (see also: http://bugs.jquery.com/ticket/8485). “Not a biggie” you say, “simply use attachEvent directly” you say?
  2. The good news: propertychange fires when using attachEvent. The bad news: It refuses to fire when modifying any CSS properties on the element that are unknown to the engine.. “Well this sucks,” you say, “but I read you can use DOMAttrModified on IE9!” you say?
  3. DOMAttrModified features exactly the same behavior. It does not fire for unknown CSS properties. This is a complete disaster.

Internet Explorer did the unforgivable – It not only introduced seemingly random inconsistencies between attachEvent and addEventListener, it heavily degraded functionality that worked well since the dark ages of IE 5.5, without providing any alternative. ANY!. And to top it – by doing so, made it impossible for us library developers to help IE by creating CSS polyfills.

Well yes. Shit’s fucked up.