Custom Software Apps & SharePoint Consulting

Software Developer Tricks for VML, jQuery, IE 8, and SharePoint 2010

Share on facebook
Share on twitter
Share on pinterest

As a SharePoint consultant, I run into and fix bugs all the time. One of my recent custom SharePoint 2010 projects required the use of HighCharts.js​ and jQuery. I’d like to share how I fixed one bug that that caused jQuery to break in combination with VML, jQuery, IE 8, and SharePoint 2010. So let’s get started solving this problem!

As you may know, the SharePoint 2010 default document mode is IE 8. Setting the document mode to anything other than IE 8 has the potential to break other things in SharePoint, such as the people picker. The master page specifies this mode from the following line in the header:

<meta http-equiv=”X-UA-Compatible” content=”IE-8″ />

HighCharts uses SVG to render the graphics in most browsers, but it uses VML to render graphics in IE versions 8 and previous versions. So, in our case, it’s using VML no matter what version of IE you are using since the master page specifies version 8. As a side note: most graphing/charting libraries use SVG for modern browsers and VML for IE8 and earlier versions.

Finally, the master page is loading jQuery for other functionality on the page.

As I worked on this project, I began to run into some issues as a result of all these factors. We did a little digging online, and found a blog that explained how jQuery breaks when pure-pseudo selectors are used on the same page that VML is present. A brief inspection of several of the Javascript files showed that pure-pseudo selectors were being used in several situations, and these were files beyond our control.

Bottom Line: We couldn’t change the Javascript files, we couldn’t change the document mode or just say “Don’t use IE”, and we needed to display the chart.

Page ViewerThe fix: Page Viewer Web Part

Since “the Page Viewer Web Part is isolated from other content on the page by using the HTML iFrame element”, this isolates the VML from the jQuery used elsewhere on the page.

Special note about Page Viewer Web Part: I tried to save my chart in an HTML file, but SharePoint tries to force you to download HTML files with the Page Viewer Web Part. So, I simply changed the filetype from .HTML to .ASPX. I didn’t change any of the HTML code…just the file extension.

And that’s how I got around the VML, jQuery, IE 8 bug. For more on SharePoint gotchas, see my post on fixing SharePoint templates.

Nate Richards
Nate has over 18 years of software engineering and consulting experience. He founded Entrance in 2003. Nate is the past President of the Board of LifeHouse Houston, a Christ-centered maternity home ministry, and is past Executive committee member and Treasurer of Houston Achievement Place, a foster care and social skills training non-profit organization.
Nate Richards on Linkedin

Share this post with your friends

Share on facebook
Share on reddit
Share on twitter
Share on linkedin