search

aFarkas / html5shiv

This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer.
http://paulirish.com/2011/the-history-of-the-html5-shiv/
9.89k stars 2.56k forks source link

breaks VML fill #131

Closed byronmcg closed 11 years ago

byronmcg commented 11 years ago

The Floatbox library recently changed from using background images for drop shadows to using CSS3 box shadows and VML fill elements for older IE. Reports are coming in of the drop-shadows being drawn as just a big block of white on pages with html5shiv present.

Simple reproductions of the problem are available at http://floatboxjs.com/misc/shiv and http://floatboxjs.com/misc/noshiv. The noshiv page works fine with the gradient fill displaying correctly. The only difference on the shiv page is the presence of the html5shiv.js include line. On this page, the VML gradient fill is white on white.

Tested from IE8 compatibility mode in IE10, and from native IE 8 running in an XP virtual machine.

...Cheers!

byronmcg commented 11 years ago

VML elements are incredibly fragile. Look at them funny and they'll break. The in the linked example is not surviving the takeover of document.createElement, or more particularly, the attachment of the element to the document fragment.

Changing the final return statement in version 3.7.0's createElement function as follows solves the problem and should be safe as it affects only and all VML elements.

old: return node.canHaveChildren && !reSkip.test(nodeName) ? data.frag.appendChild(node) : node;

new: return node.canHaveChildren && !reSkip.test(nodeName) && !node.tagUrn ? data.frag.appendChild(node) : node;

aFarkas commented 11 years ago

Thanks!