Dynamic VML pattern changes

  • Article

To support dynamic Vector Markup Language (VML) in IE9 mode, the VML behavior must be attached to an element before any VML properties are assigned. If the order-of-operations is reversed, the VML engine cannot obtain the value from the Document Object Model (DOM) and the VML may not render correctly or at all. In the following example, VML is loaded statically without a problem:

Note  Starting with Internet Explorer 10, VML is no longer supported and should not be used.

 

<style>oval {behavior: url(#default#VML);position:absolute}</style>
<body>
 <oval style="left:0;top:0;width:100px;height:50px" fillcolor="blue" stroked="f"/>
</body>

Problems can occur if, for example, the oval element is accessed before adding the style sheet and a fillcolor property is set on that object. In that case, VML will be unable to retrieve the fillcolor value and may not render correctly.

This problem is commonly encountered by older versions of the Cufon.js library that use VML for advanced font rendering (or the canvas tag, if available).

Rendering of VML works as intended in IE8 Standards mode but the VML may not render correctly or at all in IE9 mode.

You might see missing text on webpages, upside-down text, missing VML graphics in IE9 mode.

To support dynamic VML in IE9 mode, the VML behavior must be attached to an element before any VML properties are assigned.

If the page is using the Cufon library, update to the latest version of the library that is compatible with Windows Internet Explorer 9.