afarkas / html5shiv Goto Github PK

https://twitter.com/#!/jdalton/status/149879504767156224

The new html5shiv overwrites document.createElement() and has a big perf impact for IE — http://bit.ly/tOmtib

anything can be done?

As we all know, adding javascript to the head is always a bad idea because it blocks the browser until the scripts are loaded. Iepp and modernizr are important for old and bad browsers ... or both. In my opinion it makes no sense to decrease performance for modern and fast browsers especially mobile devices because of browsers, that will never feel fast.

Therefor wether iepp nor modernizr should not be loaded in the head of a document. The only reason to do so is the creation of the html5 elements. Wouldn't it be useful, adding something like this, to make the shim also usable in the footer?

function shim(doc) {
    var a = -1;
    while (++a < elemsArrLen) {
        // Use createElement so IE allows HTML5-named elements in a document
        doc.createElement(elemsArr[a]);
    }
    // Reload the source of the body if necessary
    if(!!doc.body) doc.body.innerHTML=doc.body.innerHTML;
}

see title.

I know this is a minor nit, but I'm trying to get Modernizr to pass JSHint, and one thing it complains about is:

!(options.shivCSS === false)

This is a confusing use of '!'. Is there any reason that the code isn't just:

options.shivCSS !== false

I mean, I may just be brain dead, or there may be a great reason, or it may be nothing. I just want JSHint to shut up. Thoughts?

It is failing to add options to combobox from Visual Basic Script when shivMethods is enabled (The default), I have created a test page here:

https://github.com/skarootz/html5shiv/blob/41a16315833cf41e1b474de6fee72780045db326/test/html.4.html

see title.

Let's be honest, most web devs are going to copy and paste. I'm in the process of updating the googlecode repos to the latest code (I kinda thought I was supposed to hold off releasing "pre" - but it sounds like it's stable).

Anyway, I've remove the hotlinking, forcing users to now download - but we're lazy users and they'll want the easiest solution otherwise a lot will not bother. I'm offering up a pre-minified version of the code here, but it strikes me if I can link directly to pre-minified code on this repo - then if the user hits download from the googlecode site - it'll land here (a good thing I think we can agree).

So this:

div.innerHTML = ['x<style>',
    'article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}', // Corrects block display not defined in IE6/7/8/9
    'audio{display:none}', // Corrects audio display not defined in IE6/7/8/9
    'canvas,video{display:inline-block;*display:inline;*zoom:1}', // Corrects canvas and video display not defined in IE6/7/8/9 (audio[controls] in IE7)
    '[hidden]{display:none}audio[controls]{display:inline-block;*display:inline;*zoom:1}', // Corrects 'hidden' attribute and audio[controls] display not present in IE7/8/9
    'mark{background:#FF0;color:#000}', // Addresses styling not present in IE6/7/8/9
    '</style>'].join('');

should be changed to this:

div.innerHTML = 'x<style>' +
    'article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}' + // Corrects block display not defined in IE6/7/8/9
    'audio{display:none}' + // Corrects audio display not defined in IE6/7/8/9
    'canvas,video{display:inline-block;*display:inline;*zoom:1}' + // Corrects canvas and video display not defined in IE6/7/8/9 (audio[controls] in IE7)
    '[hidden]{display:none}audio[controls]{display:inline-block;*display:inline;*zoom:1}' + // Corrects 'hidden' attribute and audio[controls] display not present in IE7/8/9
    'mark{background:#FF0;color:#000}' + // Addresses styling not present in IE6/7/8/9
    '</style>';

Minifiers will pick up it and turn it into 1 string.

ping @remy

3.3 shipped in modernizr. it should head into the GC projects now too

I keep getting debug errors with the latest version of Google Code's HTML5shiv. Here's how to reproduce the problem.

1. Use Minify for your CSS and put @media print & @media screen queries inside (e.g. )
2. Use the built-in script debugger in Internet Explorer.
3. Attempt to the print the page. The following error appears:

"Line: 3
Error: Unable to get value of the property 'media': object is null or undefined"

I expect to be able to print the page properly, HTML5 elements included! 'Cause I haven't figured out that last part yet...

I'm using a native IE8 browser, Windows XP. Tried it on IE8 browsers with Vista: same error.

this is any FYI for folks involved in the project

remy updated http://code.google.com/p/html5shiv/ and *shim so they download whats in master in this repo.

hypothetically it could link to download whats in a stable branch instead. dunno if that's necessary here.

ref #61

The current code that checks for html5.elements is incorrect and won't ever be truthy has var html5 is local and undefined at the time of the check.

It should be something like

elements: window.html5 && window.html5.elements || 'abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video'.split(' ')

javascript/iepp.js still says:

// iepp v1.6.2 MIT @jon_neal

…at the top. Two suggestions:

1. Bump the version number (v2.0.0, right?)
2. Use /*! foo */ instead of // foo since that way YUI Compressor preserves the comment.

When printing webpages using IEPP (as included in modernizr or as stand alone), iframes are blank.

It seems the src of the iframes is changed to a local url when the body content is swapped with protected version...

version used : 2.2
IE version : 8.0.6001.18702

I also created a gist for the test case : https://gist.github.com/1264354

Is this on the roadmap?

tracker: just to make we are running all tests, after closing all 3.2 issues and before calling it final 3.2.

this

if (html5.shivMethods && element.canHaveChildren && !(element.xmlns || element.tagUrn)) {

can be reworked to exit earlier

if (!html5.shivMethods || !element.canHaveChildren || element.xmlns || element.tagUrn) {
  return element;
}

Hello,

Sorry, but I'm not used to use github, so I don't know if this is the right place to submit this issue.
I inserted the script by using the following lines in my header :

<!--[if lt IE 9]>
    <script src="https ://github.com/aFarkas/html5shiv/blob/master/dist/html5shiv.js"></script>
<![endif]>

It didn't work...

I tried it another way by uploading the script and doing it this way:

<!--[if lt IE 9]>
    <script src="path_to_file/html5shiv.js"></script>
<![endif]>

It didn't work either... :(
IETester gave me an error message pointing to the line 4, character 1.

Line 3 :

m=/^<|^(?:a|b|button|code|div|fieldset|form|h1|h2|h3|h4|h5|h6|i|iframe|img|input|label|li|link|ol|option|p|param|q|script|select|span|strong|style|table|tbody|td|textarea|tfoot|th|thead|tr|ul)$/i,i,j;(function(){var a=b.createElement("a");a.innerHTML="<xyz></xyz>";i="hidden"in a;if(!(a=1==a.childNodes.length))a:{try{b.createElement("a")}catch(c){a=!0;break a}a=b.createDocumentFragment();a="undefined"==typeof a.cloneNode||"undefined"==typeof a.createDocumentFragment||"undefined"==typeof a.createElement}j=

Line 4 :

a})();var e={elements:d.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:!1!==d.shivCSS,shivMethods:!1!==d.shivMethods,type:"default",shivDocument:h};g.html5=e;h(b)})(this,document);

I deleted the space between line 3 and 4 and then it worked...

Could you fix this?

Thanks in advance.

Jojaba

Now that html5shiv supports more than just IE it should also not perform:

html5.shivDocument(node.document);

unless node.document is non-falsey.

I have tried downloading the recent HTML5 shiv and they appear to be copies of the GitHub page with the file embedded in a text box.

I cannot download direct using wget?

I know jQuery, MooTools, Prototype have IE bugs associated with OBJECT elements.
It may be a good thing to avoid shiving them as well, but I would like a failing test first.

Anyways, this is here as a place holder.

The second time the Print link is clicked on this test page in Internet Explorer 9 the following error triggers:

Line: 31
Error: Permission denied

Launching the debugger highlights the following code in iepp.js:

if(styleSheetList+'' === undefined)

One cannot see what this iepp thing is all about!

Please reconsider the inclusion of CSS rules. Reasons:

1. The existing CSS is out-of-date and missing elements like summary.
2. The existing CSS is not being updating (and wasn't prior to being included in a stable release).
3. The [hidden] rule should not be in the JS at all. It deviates from the expected behaviour of modern browser defaults by increasing the experienced specificity, meaning that IE's "hidden" will interact with other selectors slightly differently to modern browsers. This is fine if it's packaged in something like normalize.css because all browsers are on the same page and it can easily be stripped from the CSS if there is a problem. That is not the case when it is bundled in a JS lib.
4. A JS lib is not the place to include CSS that many others many not know is packaged in the lib.
5. Any changes to the CSS in the future could have substantial knock-on effects for sites that link to the Google Code CDN and build their HTML5-based sites (knowingly or unknowingly) upon the foundational CSS bundled with this lib.

Thanks.

https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js#L29 html5.element

also https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js#L50 would only reference the original element list, so new elements could not be appended.

Have a look at the two pages in this gist.

Each page has a Print link that attempts to only print out the contents of child document.

If iepp.js is included in both documents, or only in parent document, the parent document is incorrectly printed out with an empty iframe where the child document appears when clicking on either Print link.

If iepp.js is included in only the child document the parent document is incorrectly printed out with the child document appearing in the iframe when clicking either Print link.

If iepp.js is removed from both documents both Print links will result in only the child document being printed as expected.

I have observed this behaviour in Internet Explorer 6 through 9.

Example code (run in IE < 9):

var div1 = document.createElement("div");
var div2 = document.createElement("div");
alert(div2.previousSibling); // Should be null, is actually a reference to div1

nextSibling and previousSibling (and possibly other properties) should be null for a newly created element, which should effectively live in its own little vacuum until being attached to the document. I would suggest doing a thorough review of the document.createElement() shim to ensure this is the case.

This bug prevents my Rangy library working properly in IE < 9 when Modernizr is also present and is not easily worked around within Rangy code. Actually, it wouldn't be that hard to work around but I'd rather not have to, since the presence of other libraries in the page really shouldn't break the environment.

Execute in IE8:

n = document.createElement('nav');
console.log(n.outerHTML);
// <:nav></:nav>

n = document.createElement('NAV');
console.log(n.outerHTML);
// <NAV></NAV>

The latter result is desirable; the former, undesirable. Further inspection shows that the former element has an empty scopeName, whereas the latter has HTML for its scopeName.

This seems to be an issue with calling cloneNode() on the cached copy of the nav element. cloneNode() inexplicably loses the namespace in IE8 (and I can't seem to find documentation showing that this is by design). Making the tag name all-caps bypasses the cache and produces the correct result.

I tried going through the blame/history to see when this issue may have been introduced, but it seems to have been around for a while...

Wasn't there some cross-browser issue with using window.getComputedStyle over document.defaultView.getComputedStyle?
I believe it is a Firefox 3.6 issue.

cc @jonathantneal

we have a rogue appendChild here:
https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js#L11

should be changed to insertBefore just to be safe with the operation aborted issues of IE6-8.

I remember jQuery fixing a bug for outerHTML/innerHTML returning attribute values without quotes so values containing /'s could close a tag.

Hello,

Theres an syntax error in
http://html5shim.googlecode.com/svn/trunk/html5.js

Could you set the starting comment signs in line 2, please?

Thanx a lot

Best, y

I was reading through the source when I noticed line 31:

if(styleSheetList+'' === undefined){return '';}

WTF? This looks like a combination of typos or something, unless I’m missing something of course :) Anyone care to explain?

https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js#L33-35

for (var i = 0, l = elements.length; i < l; i++) {
  documentCreateElement(elements[i]);
}

html5.elements should be declared in a private elements var before being assigned to var html5 = { 'elements': elements, ... } for this to work out.

Now that html5shiv uses cloneNode I think we should just review possible issues:

I know that cloneNode has some issues, we should check the jQuery source for a round up. I believe many of the issues with cloneNode may have been avoided because these are fresh elements being cloned as part of the create step instead of attempting to clone elements with attributes and things already set.

Remove unused documentCreateElementReplaceFunction
https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js#L28-30

No matter in which order you write next two lines, IE < 9 will prompt an error and fail.

`

However, a little temporary fix is:
excanvas and html5shim are not compatible as far as i've been testing. I just replaced the shim with:

<!--[if lt IE 9]><script type="text/javascript">var e="article,aside,figure,footer,header,hgroup,menu,nav,section".split(",");for(var i=0,l=e.length;i<l;i++){document.createElement(e)};</script><![endif]-->

I have been debugging the shiv and seems that canvas is messing up. I don't know the best solution.

I noticed this code (cropped version):

var a = document.createElement('a');
//...
supportsUnknownElements = a.childNodes.length === 1 || (function() {
  try {
    (document.createElement)('a');
  } catch(e) {
    return true;
  }
}());

My point is: if there is the possiblity of an exception, according to this try/catch, then the code would nevertheless cause a JS error, because of the above same instruction document.createElement('a').

So, when could document.createElement('a') throw an exception, if ever?

Bonus question: why the parens around (document.createElement)?

No need to clear bodyElement innerHTML before removing, and use IE's swapNode method.

iepp.restoreHTML = function(){
  bodyElem.swapNode(body);
};

http://jdbartlett.github.com/innershiv/

have to expose an API for it, i imagine. but these projects should really merge.

Not really a bug in html5 shiv but figure its worth documenting..

just got an email from Jonathan Thérien

I just append to found a little annoying bug that people don't seem to be aware.

IE 7-8 doesn't allow HTML5 element to be styled by a @media print

@media print {
   html body #side, html body footer, html body header, html body div.filler {
    display:none;
   }
} 

My header and footer were still visible in IE 7-8. Didn't test IE6. Works well in IE9 and other browsers

I changed to normal DIV are now it work fine.

Demo: http://eld.zoop.net/HTML5_Not_Yet/

If this is true, we should document it somewhere as a limitation that will likely not be worked around.

I'd love to see a changelog summary of whats in v3.
it could go here https://github.com/aFarkas/html5shiv/wiki

http://sandbox.thewikies.com/html5shim/changes.txt captured the v2 -> v3 changes.. can we coalesce in the 3.3 changes into a single list?

and once that's done let's ship 3.3.

For shipping I'd like:

• changelog on the wiki
• updates to the two downstream projects: remy's googlecode and modernizr (2.5.2)
• tweets and fanfare!
• my "story of" blog post updated with the past 3 months of activity.

@aFarkas can you kick this off?

In modernizr the iepp global isnt being created in any browser but IE.

I think it has to do with the funky assignments at the beginning.

Hey there,

I’ve been following the development of HTML5 shiv, shimprove, innerShiv, IEPP etc. right from the beginning but stopped when jQuery integrated the innerShiv. Since we had problems with jQuery’s approach, today I tried to catch up and dive into the current html5shiv again. I have to admit I found it very hard to get a clue about the project. While html5shiv originally started as a one-liner several years ago, it grew to a complex and sophisticated project.

Compared to the innerShiv, additional checks, caches and exceptions were added. Don’t get me wrong, I do not want to question them, I trust your decisions. I’m sure they are necessary for robustness and performance. I also know the problem itself is complex and the html5shiv is basically a clever but ugly hack. But for me it’s difficult to evaluate this script for production use given there is little explanation of implementation details. It took me long to figure out how the basics of the script works. Sure, I see what it’s doing, but I’m wondering why it’s done like this. A feature list and a good code documentation would definitely help.

Stupid question, but which cases does this script try to cover and which are not covered? There are several code comments which allude to the problems you faced. For example, I saw that some elements are skipped. In practise, var form = document.createElement('form'); form.innerHTML = '<section>…</section>;' won’t work as expected. That’s okay, I’m sure you did this for good reasons. I just would have expected to be informed about that in the README because I would likely run into such issues in production code.

While the original innerShiv is an “unobtrusive” helper function, this project overwrites createElement and createDocumentFragment. I consider myself an experienced JavaScripter, but I cannot estimate the possible consequences. Apparently this has a performance impact you already try to address by caching, loop unrolling etc. Nonetheless I’m wondering whether I really want to overwrite these natives. This seems to solve some problems while introducing new ones. It’s hard to make an informed decision given that there are no in-depth articles about that topic. (Are there any?)

I took me some time to figure out that the original html5shiv which “registers” HTML5 element types via document.createElement (and frag.createElement) is located at the point where createDocumentFragment is overwritten (correct me if I’m wrong). Of course it’s your decision to write dense and highly-optimized code. I know this is jdalton’s performance optimization style as seen on lodash, for example. This is great for browser engines and end users who just link to the script without having a clue about what it actually does. But this “code obsfuscation” is practically unreadable for other JavaScript devs who need to know what this script is doing under the hood. This conflict could be solved by better code comments and additional documentation, I think.

Regards,
Mathias

When html5shiv is present on a page, Highcharts charts render in grey. See this forum post for more details.

I noticed in Chrome and Firefox that:

var c = document.createElement;
c('div'); // throws an error

This means that an environment may error with how html5shiv stores document.createElement in its documentCreateElement variable.

A way around it is:

// grab Function.prototype.call in case the host method doesn't have it
var call = Date.call;
call.call(documentCreateElement, scopeDocument, tag);

A few sites using the HTML5shiv have suddenly (over the weekend 18th, 19th Feb) started displaying rendering problems. Cufon replaces the text, but system text is still visible behind.

Appears to be anything below IE9.

Only common denominator appears to be the html5shiv.

No JS errors.

I was getting a strange behaviour when using the print version (on a complex page with dynamic content scrolling - instead of page reload) I guess .. probably because of the page complexity, but after print preview in IE8 a blank page was show instead of the content. Sorry I cannot provide the page itself. But to make it 'work' I had to execute 'after print' code with a delay.

ownerWindow.attachEvent('onafterprint', function() {
  var fnc = function(){
    // remove wrappers, leaving the original elements, and remove the shived style sheet
    removeWrappers(wrappers);
    shivedSheet.removeNode(true);
   // my code >>
    if (_g_after_print)
        {
            _g_after_print();
        }
    // << my code
  };
  window.setTimeout(fnc, 500);
});

This was a quick 'fix', did not try to see why (and when) this can happen .. but it just worked for me.
I used there '_g_after_print' just to scroll the content to the right position as It was changed by the 'html5shiv' on the way.