June 13, 2012

The Times They Are A Changing

I am currently working on a web-project that unavoidably makes use of transformations on HTML-elements. The first version allows the user to select an object on a webpage and rotate it. In future versions users will probably will be able to perform other transformations on the object (e.g. skew, scale or perspective). My current implementation uses a jQuery slider to allow the user to rotate the selected object.

I was happily programming along and the design and implementation took me about half a day. That was until I checked what my implementation looked like in Internet Explorer versions 8 and 7. That's where the horror kicked in.

Rotation in all browsers (including IE 9 to be fair) was around the center of the selected object. But with IE 7 and IE 8, the point of rotation seemed to change in an inimitable way.


The trouble with DXImageTransform.Microsoft.Matrix
Studying the documentation of this filter one is lead to expect that the top-left of the object is the point of the rotation. But this simply is not the case. Microsoft took the liberty to augment the transformation you perform with a free-of-charge transformation from the boys in Redmond themselves.

As far as I was able to check, the free-of-charge transformation makes sure that the top-left of the boundingbox after rotating an element gets the same position as the top-left of the original element. While this might sound plausible, it actually is nonsens. One executes a transformation on an object and does not expect a free-of-charge extra transformation to be part of the deal. MS's documentation does not mention the extra transformation, let alone that it explains how it can be undone.

Check this example to see the ugly effect of this transformation. Click "huwelijkskaartjes" and next click on the card showing the text "Wij gaan trouwen". Now click on an element on the card and play around with the slider labeled "Rotatie".

The example is the version of the application I am currently re-implementing. Whatever browser you're using, rotation of an object mimics the way IE rotates an element. After days of struggle my predecessors capitulated. Unable to fix the wrongdoings of DXImageTransform.Microsoft.Matrix they decided the simplest way to tackle this was to make other browsers behave like IE. And indeed it was!

Another Redmond-Monkey pulling my leg.
I refused to capitulate but it took me several days and a sleepless night to tackle this problem. The sad part is that my solution works with IE 7, not with IE 8. Some intellectual in Redmond decided that an inner HTML-element should not take the transformations of the parent-element into account if the position of the inner-element is "absolute". This is where I capitulated. I managed to trick IE into rotating around the center of the object and my solution did not work in IE-8. So I finally capitulated and decided to block IE-8 using the following construct:


<!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=7,9" >
<![endif]-->

This construct is ignored by non-MS browsers. But for Internet Explorer, this causes IE-8 to behave like IE-7.


History haunts Microsoft
The dominant position of Microsoft with a 90% marketshare is long gone. Thanks to open-source initiatives -Mozilla Firefox, KHTML (Webkit)- IE's marketshare is rapidly dwindling. A couple of years ago Microsoft's filters provided capabilities beyond any other browser. The filters also introduce idiosyncrasies that are very difficult to overcome.

In my current project it took me half a day to implement the rotation functionality for all modern browsers -Mozilla, Safari, Chrome, IE-9 and Opera. To get it working on IE-7 took me several days.

Until now my client is concerned about IE-7 and IE-8. My client wants me to deliver software that works on IE-7 and IE-8. He's a lot less concerned about older versions of Mozilla, Chrome, Safari and Opera. For those browsers my implementation only needs to support the latest stable release.

Turn of the tables
With MS's dwindling browser-share it becomes more and more difficult to justify the extra effort to make web-sites and web-applications work well with MS's legacy browsers. Most versions of Mozilla, Safari, Chrome and Opera all work perfectly on most versions of Windows.

In times long gone one would encounter websites that stated "This site is best viewed on Internet Explorer version xx.xx". It's about time we turned the tables and used our browser-sniffing to tell users they're using a sub-standard browser and should switch to a non-MS alternative.

Let's be fair to Microsoft
We must be fair to Microsoft and give them credit for what they've accomplished. So what did they accomplish? Let's compare MS to Opera. A couple of years ago about 1.000 people within Microsoft where involved with Internet Explorer and Microsoft spend around $100 million per annum on Internet Explorer.

Today, Opera as a company has a total of 700 employees, part of whom work on the Opera browser. Their budget doesn't even come close to the $100 million per annum MS invested in Internet Explorer. With their limited resources Opera produced a browser that with almost every release was far ahead of Microsoft's Internet Explorer.

So let's be fair indeed and conclude that a small company like Opera in each and every way surpassed Microsoft. Opera had -compared to Microsoft- hardly any resources. Only a few people and a very limited budget. But the browser they delivered beat IE in each and every version in each and every aspect.

What about the future, IE-9 and IE-10?
Frankly, I couldn't care less about IE-9 or IE-10. Microsoft's market share is dwindling and rightly so. I'll use any trick in the book to convince my clients to completely neglect Microsoft and IE. MS produces a browser that adheres to the W3C standards? Fine with me. But I actually couldn't care less and will do my utmost to convince my clients of the same. For the times they are a changing and MS no longer dictates the WWW.