Tuesday, March 31st, 2009

The VML changes in IE 8

Category: IE, Microsoft

We mentioned that a new excanvas was released to keep up support with IE 8. Well, Louis-Rémi Babe has detailed his travails finding out what what changed in IE 8 VML land:

Although the VML specification hasn’t undergone any improvements or modifications since its publication back in 1998, Microsft development team felt like considerably changing the way their own standard should be handled:

  • The namespace declaration has to take a second argument to be functional:
    document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', "#default#VML");
    instead of simply:
    document.namespaces.add('v', 'urn:schemas-microsoft-com:vml');
  • The selector for the behaviour rules needs to be slightly modified (more information follows).
  • For a standard compliance purpose, when setting dimensions or position of an element, the unit no longer defaults to ‘px’. It has to be explicitly specified
  • It is no longer possible to create a VML element outside of the DOM:

    var myFragment = document.createDocumentFragment();
    '<v:rect id="myRect" fillcolor="blue" style="top:10px;left:15px;width:50px;height:30px;position:absolute;"></biv:rect>'

    This rect element will not be displayed! And don’t try to modify its CSS properties with the developer tool, you are likely to crash the tab or even the browser, if you’re lucky. Fortunately, there is an easy fix for this bug: you just have to copy the outerHTML of the element into itself:
    var myRect = document.getElementById('myRect');

    myRect.outerHTML = myRect.outerHTML;

  • It’s no more possible to use % unit! This one is my favourite. The advantage of vector graphics is that they can be scaled without quality loss. Now tell me how you scale a graphic from which all components dimensions and position are set in pixels! You have to resort to using the onpropertychange event to recalculate one after the other those values each time you want to resize your graphic. But there is a lot of case where you simply can’t fix this bug. For example, if you had an rectangle in a div: the div has no dimensions and scales with its content, and you want the height of your rectangle to scale with the div. There was a time when it was possible to simply set the height of the rectangle to 100% (providing the position of the div is relative, of course). But it was probably too easy after all.

Remarkably, none of this change has been announced by the IE dev team, as far as I know. The only announcement made about VML can be found on a blog post

Posted by Dion Almaer at 12:19 am

3.8 rating from 30 votes


Comments feed TrackBack URI

The most outstanding change however (my favourite) is the drop in VML rendering performance. Rendering VML fragment in standards mode in IE8 is about 10 times slower compared to IE8 quirks or previous IE versions.

Comment by SergeyIlinsky — March 31, 2009

Sigh. Going from IE6 to IE7 we lost some VML functionality and gained some new bugs. IE7 to IE8 transition met my expectations 100%: even more bugs, worse performance, harder to work with VML, the standards mode is completely broken (it was half-broken before). I am almost afraid what the coming IE9 (or whatever it will be called) is going to bring us.

Comment by elazutkin — March 31, 2009

Why would they make VML work for us when they have a perfectly good alternative in the form of silverlight? /sarcasm

Comment by Joeri — March 31, 2009

I’m in agreement with Joeri on this one. I can’t think of other reasons to not offer canvas support and to degrade VML reliability/performance other than to lock developers into proprietary plugins.

Comment by loginx — March 31, 2009

The biggest current use for VML is to implement SVG using client js libraries, or to minimally pull of SVG like affects. I find it annoying that MS seems to always break their supposedly standards based technology when they are offering something that clearly competes with it (Silverlight). IE8 being a slight exception (and only because they are getting hammered on that front).

MS must hate their web developers, to always make so much work for them. I think a Flash SVG implementation should be created more to spite them than for any other reason. Either that or create a Mozilla or WebKit based plugin. Google extends IE through Gears – the OSS community could do the same for other missing features, like JS2.0 (if we ever get here), audio/video tags, and SVG.

I work in the industry as a web developer and many of my clients are really getting tired of hearing about why they can’t have this or that because IE doesn’t support it. Many of them would be happy to use a plugin if they though it had enough penetration – and they do, they use Flash. I think there’s room for a Mozilla or WebKit based ActiveX control at this point.

Comment by CaptainN — March 31, 2009

There is an additional problem when accessing VML elements by using get/setAttribute. The simple solution is following:

if (document.documentMode==8) {
} else {

Comment by ucanmexwise — March 31, 2009

DD Roundies (Rounded corner emulation in IE – http://www.dillerdesign.com/experiment/DD_roundies/)
and Raphaël (SVG emulation in IE – http://raphaeljs.com/ )

have mentioned the slow as molasses problem.

Does anyone know if IE 8 implemented SMIL 3.0?

Comment by blinkingmarquee — May 13, 2009

Leave a comment

You must be logged in to post a comment.