Skip to main content

Bug Tracker

Side navigation

#6485 closed feature (fixed)

Opened April 26, 2010 10:00PM UTC

Closed September 19, 2011 08:47PM UTC

Last modified October 17, 2012 08:50PM UTC

Solution for HTML5 in IE

Reported by: jonathantneal Owned by: rwaldron
Priority: high Milestone: 1.7
Component: core Version: 1.4.4
Keywords: html5,innershiv,innershim,needsreview,1.7-discuss Cc: paul.irish, SlexAxton
Blocked by: Blocking:
Description

I wanted to propose some solutions to be used for some major HTML5 issues in IE6, IE7, and IE8, especially in regards to javascript and jQuery.

Issues / Solutions:

1. HTML5 is not supported on a document, html5 elements will not properly contain contents

  • document.createElement('X') triggers support for 'X' element (you know this one, it's the "shiv I mean shim" method)

1. HTML5 is not supported with innerHTML

  • HTML5 added with innerHTML is supported when the element being innerHTML'd is already appended to a shim'd document (or document fragment!)

1. <HTML5_elements> become <:HTML5_elements> when element is cloneNode'd

  • use an alternate cloneNode function, the default is broken and should not be used in IE anyway (for example: it should not clone events)

Example of solutions, in action, with comments:

http://pastie.org/935834


EDIT by paulirish.. the scope of this ticket it only to fix #2 and #3. the markup in the document will still require the basic html5shiv/modernizr to adjust.

this fix will correct the assumption that "jquery is broken" because it cannot handle ajax'd in html5 content and the like.

Attachments (0)
Change History (62)

Changed October 29, 2010 04:58PM UTC by rwaldron comment:1

keywords: → needsreview
priority: → undecided

Changed October 29, 2010 05:05PM UTC by rwaldron comment:2

resolution: → invalid
status: newclosed

Changed November 05, 2010 02:02AM UTC by dmethvin comment:3

keywords: needsreview

Take a look at modernizr for this, it's kind of heavy to put into jQuery core because everyone would pay the price for it.

Changed December 06, 2010 07:37PM UTC by SlexAxton comment:4

cc: → paul.irish, SlexAxton
keywords: → html5, innershiv, innershim, needsreview
milestone: 1.4.31.5
priority: undecidedhigh
resolution: invalid
status: closedreopened
version: 1.4.21.4.4

We've talked about different ways to handle this in the 1.5 feature list. I'm going to open this back up as something we are actively considering.

Changed December 06, 2010 07:40PM UTC by paul.irish comment:5

#5327 is a duplicate of this ticket.

Changed December 06, 2010 07:47PM UTC by paul.irish comment:6

description: I wanted to propose some solutions to be used for some major HTML5 issues in IE6, IE7, and IE8, especially in regards to javascript and jQuery. \ \ Issues / Solutions: \ - HTML5 is not supported on a document, html5 elements will not properly contain contents \ + document.createElement('X') triggers support for 'X' element (you know this one, it's the "shiv I mean shim" method) \ \ - HTML5 is not supported with innerHTML \ + HTML5 added with innerHTML is supported when the element being innerHTML'd is already appended to a shim'd document (or document fragment!) \ \ - <HTML5_elements> become <:HTML5_elements> when element is cloneNode'd \ + use an alternate cloneNode function, the default is broken and should not be used in IE anyway (for example: it should not clone events) \ \ Example of solutions, in action, with comments: \ \ http://pastie.org/935834I wanted to propose some solutions to be used for some major HTML5 issues in IE6, IE7, and IE8, especially in regards to javascript and jQuery. \ \ Issues / Solutions: \ 1. HTML5 is not supported on a document, html5 elements will not properly contain contents \ * document.createElement('X') triggers support for 'X' element (you know this one, it's the "shiv I mean shim" method) \ 1. HTML5 is not supported with innerHTML \ * HTML5 added with innerHTML is supported when the element being innerHTML'd is already appended to a shim'd document (or document fragment!) \ 1. <HTML5_elements> become <:HTML5_elements> when element is cloneNode'd \ * use an alternate cloneNode function, the default is broken and should not be used in IE anyway (for example: it should not clone events) \ \ Example of solutions, in action, with comments: \ \ http://pastie.org/935834

The major problem is dealing with new elements either ajax'd in or created on the fly... issue #2 of Jon's above.

More detail from the closed dupe #5327 is here: : http://stackoverflow.com/questions/1191164/jquery-html5-append-appendto-and-ie

Test case: http://jsfiddle.net/DVnmE/

Remy's test case: http://jsbin.com/olizu

Changed April 17, 2011 12:15AM UTC by john comment:7

milestone: → 1.next

So right now we're looking for a good patch to this. I'm going to bring it up again for 1.7. If we had had a patch for 1.6, it probably would've landed then.

Changed April 17, 2011 11:04PM UTC by timmywil comment:8

status: reopenedopen

Changed May 02, 2011 06:45PM UTC by timmywil comment:9

#9049 is a duplicate of this ticket.

Changed May 22, 2011 07:27PM UTC by john comment:10

keywords: html5, innershiv, innershim, needsreviewhtml5,innershiv,innershim,needsreview,1.7-discuss

Nominating ticket for 1.7 discussion.

Changed May 22, 2011 09:27PM UTC by rwaldron comment:11

description: I wanted to propose some solutions to be used for some major HTML5 issues in IE6, IE7, and IE8, especially in regards to javascript and jQuery. \ \ Issues / Solutions: \ 1. HTML5 is not supported on a document, html5 elements will not properly contain contents \ * document.createElement('X') triggers support for 'X' element (you know this one, it's the "shiv I mean shim" method) \ 1. HTML5 is not supported with innerHTML \ * HTML5 added with innerHTML is supported when the element being innerHTML'd is already appended to a shim'd document (or document fragment!) \ 1. <HTML5_elements> become <:HTML5_elements> when element is cloneNode'd \ * use an alternate cloneNode function, the default is broken and should not be used in IE anyway (for example: it should not clone events) \ \ Example of solutions, in action, with comments: \ \ http://pastie.org/935834I wanted to propose some solutions to be used for some major HTML5 issues in IE6, IE7, and IE8, especially in regards to javascript and jQuery.\ \ Issues / Solutions:\ 1. HTML5 is not supported on a document, html5 elements will not properly contain contents\ * document.createElement('X') triggers support for 'X' element (you know this one, it's the "shiv I mean shim" method)\ 1. HTML5 is not supported with innerHTML\ * HTML5 added with innerHTML is supported when the element being innerHTML'd is already appended to a shim'd document (or document fragment!)\ 1. <HTML5_elements> become <:HTML5_elements> when element is cloneNode'd\ * use an alternate cloneNode function, the default is broken and should not be used in IE anyway (for example: it should not clone events)\ \ Example of solutions, in action, with comments:\ \ http://pastie.org/935834

+1, I believe we said we'd try this, but I'm beginning to think we should first try out a plugin.

Changed May 23, 2011 12:01AM UTC by jaubourg comment:12

+1, Gain is obvious but what is the cost in size?

Changed May 23, 2011 03:18AM UTC by timmywil comment:13

+1, I would use this a lot.

Changed May 23, 2011 03:37PM UTC by ajpiano comment:14

_comment0: +11306165091201089
description: I wanted to propose some solutions to be used for some major HTML5 issues in IE6, IE7, and IE8, especially in regards to javascript and jQuery.\ \ Issues / Solutions:\ 1. HTML5 is not supported on a document, html5 elements will not properly contain contents\ * document.createElement('X') triggers support for 'X' element (you know this one, it's the "shiv I mean shim" method)\ 1. HTML5 is not supported with innerHTML\ * HTML5 added with innerHTML is supported when the element being innerHTML'd is already appended to a shim'd document (or document fragment!)\ 1. <HTML5_elements> become <:HTML5_elements> when element is cloneNode'd\ * use an alternate cloneNode function, the default is broken and should not be used in IE anyway (for example: it should not clone events)\ \ Example of solutions, in action, with comments:\ \ http://pastie.org/935834I wanted to propose some solutions to be used for some major HTML5 issues in IE6, IE7, and IE8, especially in regards to javascript and jQuery. \ \ Issues / Solutions: \ 1. HTML5 is not supported on a document, html5 elements will not properly contain contents \ * document.createElement('X') triggers support for 'X' element (you know this one, it's the "shiv I mean shim" method) \ 1. HTML5 is not supported with innerHTML \ * HTML5 added with innerHTML is supported when the element being innerHTML'd is already appended to a shim'd document (or document fragment!) \ 1. <HTML5_elements> become <:HTML5_elements> when element is cloneNode'd \ * use an alternate cloneNode function, the default is broken and should not be used in IE anyway (for example: it should not clone events) \ \ Example of solutions, in action, with comments: \ \ http://pastie.org/935834

+1, I'm for this and it would be a boon for many, but the problem isn't size - it's speed. We'd need to see a patch and do a lot of perf analysis..

Changed May 23, 2011 05:20PM UTC by paul.irish comment:15

+1, major painpoint for developers.

Changed May 23, 2011 09:35PM UTC by dmethvin comment:16

+1, Fan of a team-supported solution, but first as a plugin and not in core for 1.7

Changed May 26, 2011 03:26AM UTC by rwaldron comment:17

See also: #6286

Changed June 03, 2011 01:32PM UTC by john comment:18

description: I wanted to propose some solutions to be used for some major HTML5 issues in IE6, IE7, and IE8, especially in regards to javascript and jQuery. \ \ Issues / Solutions: \ 1. HTML5 is not supported on a document, html5 elements will not properly contain contents \ * document.createElement('X') triggers support for 'X' element (you know this one, it's the "shiv I mean shim" method) \ 1. HTML5 is not supported with innerHTML \ * HTML5 added with innerHTML is supported when the element being innerHTML'd is already appended to a shim'd document (or document fragment!) \ 1. <HTML5_elements> become <:HTML5_elements> when element is cloneNode'd \ * use an alternate cloneNode function, the default is broken and should not be used in IE anyway (for example: it should not clone events) \ \ Example of solutions, in action, with comments: \ \ http://pastie.org/935834I wanted to propose some solutions to be used for some major HTML5 issues in IE6, IE7, and IE8, especially in regards to javascript and jQuery.\ \ Issues / Solutions:\ 1. HTML5 is not supported on a document, html5 elements will not properly contain contents\ * document.createElement('X') triggers support for 'X' element (you know this one, it's the "shiv I mean shim" method)\ 1. HTML5 is not supported with innerHTML\ * HTML5 added with innerHTML is supported when the element being innerHTML'd is already appended to a shim'd document (or document fragment!)\ 1. <HTML5_elements> become <:HTML5_elements> when element is cloneNode'd\ * use an alternate cloneNode function, the default is broken and should not be used in IE anyway (for example: it should not clone events)\ \ Example of solutions, in action, with comments:\ \ http://pastie.org/935834

+1, Only if this can be done in such a way that doesn't cripple performance.

Changed June 03, 2011 02:42PM UTC by scottgonzalez comment:19

+1, I'd like to see performance impact

Changed June 04, 2011 01:19AM UTC by paul.irish comment:20

description: I wanted to propose some solutions to be used for some major HTML5 issues in IE6, IE7, and IE8, especially in regards to javascript and jQuery.\ \ Issues / Solutions:\ 1. HTML5 is not supported on a document, html5 elements will not properly contain contents\ * document.createElement('X') triggers support for 'X' element (you know this one, it's the "shiv I mean shim" method)\ 1. HTML5 is not supported with innerHTML\ * HTML5 added with innerHTML is supported when the element being innerHTML'd is already appended to a shim'd document (or document fragment!)\ 1. <HTML5_elements> become <:HTML5_elements> when element is cloneNode'd\ * use an alternate cloneNode function, the default is broken and should not be used in IE anyway (for example: it should not clone events)\ \ Example of solutions, in action, with comments:\ \ http://pastie.org/935834I wanted to propose some solutions to be used for some major HTML5 issues in IE6, IE7, and IE8, especially in regards to javascript and jQuery. \ \ Issues / Solutions: \ 1. HTML5 is not supported on a document, html5 elements will not properly contain contents \ * document.createElement('X') triggers support for 'X' element (you know this one, it's the "shiv I mean shim" method) \ 1. HTML5 is not supported with innerHTML \ * HTML5 added with innerHTML is supported when the element being innerHTML'd is already appended to a shim'd document (or document fragment!) \ 1. <HTML5_elements> become <:HTML5_elements> when element is cloneNode'd \ * use an alternate cloneNode function, the default is broken and should not be used in IE anyway (for example: it should not clone events) \ \ Example of solutions, in action, with comments: \ \ http://pastie.org/935834

I was working with jdbarlett on a new version of innerShiv http://jdbartlett.github.com/innershiv/ that is much faster...

https://gist.github.com/7e1c3c76db44e5a249ff is the general idea.

We feature test to see if the shiv is necessary, and we also regex against the input to see if we should even bother shiv'ing it. If it is, then we innerHTML it into an on-DOM div and grab the new childNodes which we'll use in a docFragment.

Currently it supports two signatures:

    innerShiv(htmlstring) // documentFragment
    innerShiv(htmlstring, false) // array of nodes

But that clearly could be simplified for its purposes within jQuery.

From a perf standpoints the questions I have are:

  • does the --- 1) add a node to the dom 2) innnerHTML inside of it 3) pull it off --- trick have a significant hit?
  • is the regex against the incoming string worth it?

I'm gonna be quite busy, but I'll try to take a stab at this within jQuery and get some perf numbers, sometime, if no one else beats me to it. Help requested :)

Changed June 04, 2011 10:17PM UTC by addyosmani comment:21

description: I wanted to propose some solutions to be used for some major HTML5 issues in IE6, IE7, and IE8, especially in regards to javascript and jQuery. \ \ Issues / Solutions: \ 1. HTML5 is not supported on a document, html5 elements will not properly contain contents \ * document.createElement('X') triggers support for 'X' element (you know this one, it's the "shiv I mean shim" method) \ 1. HTML5 is not supported with innerHTML \ * HTML5 added with innerHTML is supported when the element being innerHTML'd is already appended to a shim'd document (or document fragment!) \ 1. <HTML5_elements> become <:HTML5_elements> when element is cloneNode'd \ * use an alternate cloneNode function, the default is broken and should not be used in IE anyway (for example: it should not clone events) \ \ Example of solutions, in action, with comments: \ \ http://pastie.org/935834I wanted to propose some solutions to be used for some major HTML5 issues in IE6, IE7, and IE8, especially in regards to javascript and jQuery.\ \ Issues / Solutions:\ 1. HTML5 is not supported on a document, html5 elements will not properly contain contents\ * document.createElement('X') triggers support for 'X' element (you know this one, it's the "shiv I mean shim" method)\ 1. HTML5 is not supported with innerHTML\ * HTML5 added with innerHTML is supported when the element being innerHTML'd is already appended to a shim'd document (or document fragment!)\ 1. <HTML5_elements> become <:HTML5_elements> when element is cloneNode'd\ * use an alternate cloneNode function, the default is broken and should not be used in IE anyway (for example: it should not clone events)\ \ Example of solutions, in action, with comments:\ \ http://pastie.org/935834

+1

Changed June 05, 2011 08:35PM UTC by ajpiano comment:22

description: I wanted to propose some solutions to be used for some major HTML5 issues in IE6, IE7, and IE8, especially in regards to javascript and jQuery.\ \ Issues / Solutions:\ 1. HTML5 is not supported on a document, html5 elements will not properly contain contents\ * document.createElement('X') triggers support for 'X' element (you know this one, it's the "shiv I mean shim" method)\ 1. HTML5 is not supported with innerHTML\ * HTML5 added with innerHTML is supported when the element being innerHTML'd is already appended to a shim'd document (or document fragment!)\ 1. <HTML5_elements> become <:HTML5_elements> when element is cloneNode'd\ * use an alternate cloneNode function, the default is broken and should not be used in IE anyway (for example: it should not clone events)\ \ Example of solutions, in action, with comments:\ \ http://pastie.org/935834I wanted to propose some solutions to be used for some major HTML5 issues in IE6, IE7, and IE8, especially in regards to javascript and jQuery. \ \ Issues / Solutions: \ 1. HTML5 is not supported on a document, html5 elements will not properly contain contents \ * document.createElement('X') triggers support for 'X' element (you know this one, it's the "shiv I mean shim" method) \ 1. HTML5 is not supported with innerHTML \ * HTML5 added with innerHTML is supported when the element being innerHTML'd is already appended to a shim'd document (or document fragment!) \ 1. <HTML5_elements> become <:HTML5_elements> when element is cloneNode'd \ * use an alternate cloneNode function, the default is broken and should not be used in IE anyway (for example: it should not clone events) \ \ Example of solutions, in action, with comments: \ \ http://pastie.org/935834

+1, especially if we're able to limit its impact in the ways paul describes above

Changed June 06, 2011 03:49PM UTC by jzaefferer comment:23

description: I wanted to propose some solutions to be used for some major HTML5 issues in IE6, IE7, and IE8, especially in regards to javascript and jQuery. \ \ Issues / Solutions: \ 1. HTML5 is not supported on a document, html5 elements will not properly contain contents \ * document.createElement('X') triggers support for 'X' element (you know this one, it's the "shiv I mean shim" method) \ 1. HTML5 is not supported with innerHTML \ * HTML5 added with innerHTML is supported when the element being innerHTML'd is already appended to a shim'd document (or document fragment!) \ 1. <HTML5_elements> become <:HTML5_elements> when element is cloneNode'd \ * use an alternate cloneNode function, the default is broken and should not be used in IE anyway (for example: it should not clone events) \ \ Example of solutions, in action, with comments: \ \ http://pastie.org/935834I wanted to propose some solutions to be used for some major HTML5 issues in IE6, IE7, and IE8, especially in regards to javascript and jQuery.\ \ Issues / Solutions:\ 1. HTML5 is not supported on a document, html5 elements will not properly contain contents\ * document.createElement('X') triggers support for 'X' element (you know this one, it's the "shiv I mean shim" method)\ 1. HTML5 is not supported with innerHTML\ * HTML5 added with innerHTML is supported when the element being innerHTML'd is already appended to a shim'd document (or document fragment!)\ 1. <HTML5_elements> become <:HTML5_elements> when element is cloneNode'd\ * use an alternate cloneNode function, the default is broken and should not be used in IE anyway (for example: it should not clone events)\ \ Example of solutions, in action, with comments:\ \ http://pastie.org/935834

+1

Changed June 14, 2011 06:21PM UTC by paul.irish comment:24

_comment0: Started looking at the code around this and I'm gonna leave my notes, in case they can help someone else... \ \ Talked with jdbarlett about this at TXJS and we agreed the shiv'ing approach within Shimprove http://www.iecss.com/shimprove/ is probably a better choice here. \ \ Essentially, that approach is this: \ {{{#!js \ var frag = document.createDocumentFragment(); \ frag.createElement('abbr'); \ frag.createElement('aside'); \ // etc, ... \ \ // fragment can now accept unknown element nodes \ }}} \ \ It looks like we'll want test coverage for: \ \ * `html()` when using the innerHTML shortcut fast path \ * `clone()` \ * append/prepend/before/after/replaceWith and appendto/prependto/insertbefore/insertafter/replaceAll and wrap/wrapInner/wrapAll ... all use `domManip` so really only a single code path there should be sufficient. \ \ Implementation notes: \ \ * Appears as though everything is within manipulation.js \ * `buildFragment()` is used by domManip and looks to be the right place to improve things \ * a docFrag is made before sending it off to `jQuery.clean()` along with the html string. We could shiv it before clean or maybe within clean \ \ Open questions: \ \ * regex to test against incoming html? (or some indexOf magic?) \ * There is an innerHTML set action inside of clean(). Does that collapse unknown elements, or no, since it's still off-dom? \ 1308075724686908
_comment1: Started looking at the code around this and I'm gonna leave my notes, in case they can help someone else... \ \ Talked with jdbarlett about this at TXJS and we agreed the shiv'ing approach within Shimprove http://www.iecss.com/shimprove/ is probably a better choice here. \ \ Essentially, that approach is this: \ {{{#!js \ var frag = document.createDocumentFragment(); \ frag.createElement('abbr'); \ frag.createElement('aside'); \ // etc, ... \ \ // fragment can now accept unknown element nodes \ }}} \ \ It looks like we'll want test coverage for: \ \ * `html()` when using the innerHTML shortcut fast path \ * `clone()` \ * `append/prepend/before/after/replaceWith` and `appendto/prependto/insertbefore/insertafter/replaceAll` and `wrap/wrapInner/wrapAll` ... all use `domManip` so really only a single code path there should be sufficient. \ \ Implementation notes: \ \ * Appears as though everything is within manipulation.js \ * `buildFragment()` is used by domManip and looks to be the right place to improve things \ * a docFrag is made before sending it off to `jQuery.clean()` along with the html string. We could shiv it before clean or maybe within clean \ \ Open questions: \ \ * regex to test against incoming html? (or some indexOf magic?) \ * There is an innerHTML set action inside of clean(). Does that collapse unknown elements, or no, since it's still off-dom? \ 1308075840043378
_comment2: Started looking at the code around this and I'm gonna leave my notes, in case they can help someone else... \ \ Talked with jdbarlett about this at TXJS and we agreed the shiv'ing approach within Shimprove http://www.iecss.com/shimprove/ is probably a better choice here. Well, actually the pastie jon linked in this issue's description has that code in a more readable format. \ \ Essentially, that approach is this: \ {{{#!js \ var frag = document.createDocumentFragment(); \ frag.createElement('abbr'); \ frag.createElement('aside'); \ // etc, ... \ \ // fragment can now accept unknown element nodes \ }}} \ \ It looks like we'll want test coverage for: \ \ * `html()` when using the innerHTML shortcut fast path \ * `clone()` \ * `append/prepend/before/after/replaceWith` and `appendto/prependto/insertbefore/insertafter/replaceAll` and `wrap/wrapInner/wrapAll` ... all use `domManip` so really only a single code path there should be sufficient. \ \ Implementation notes: \ \ * Appears as though everything is within manipulation.js \ * `buildFragment()` is used by domManip and looks to be the right place to improve things \ * a docFrag is made before sending it off to `jQuery.clean()` along with the html string. We could shiv it before clean or maybe within clean \ \ Open questions: \ \ * regex to test against incoming html? (or some indexOf magic?) \ * There is an innerHTML set action inside of clean(). Does that collapse unknown elements, or no, since it's still off-dom? \ 1308075877921044
_comment3: Started looking at the code around this and I'm gonna leave my notes, in case they can help someone else... \ \ Talked with jdbarlett about this at TXJS and we agreed the shiv'ing approach within Shimprove http://www.iecss.com/shimprove/ is probably a better choice here. Well, actually [http://pastie.org/935834 the pastie jon linked] in this issue's description has that code in a more readable format. \ \ Essentially, that approach is this: \ {{{#!js \ var frag = document.createDocumentFragment(); \ frag.createElement('abbr'); \ frag.createElement('aside'); \ // etc, ... \ \ // fragment can now accept unknown element nodes \ }}} \ \ It looks like we'll want test coverage for: \ \ * `html()` when using the innerHTML shortcut fast path \ * `clone()` \ * `append/prepend/before/after/replaceWith` and `appendto/prependto/insertbefore/insertafter/replaceAll` and `wrap/wrapInner/wrapAll` ... all use `domManip` so really only a single code path there should be sufficient. \ \ Implementation notes: \ \ * Appears as though everything is within manipulation.js \ * `buildFragment()` is used by domManip and looks to be the right place to improve things \ * a docFrag is made before sending it off to `jQuery.clean()` along with the html string. We could shiv it before clean or maybe within clean \ \ Open questions: \ \ * regex to test against incoming html? (or some indexOf magic?) \ * There is an innerHTML set action inside of clean(). Does that collapse unknown elements, or no, since it's still off-dom? \ 1308076026285283
description: I wanted to propose some solutions to be used for some major HTML5 issues in IE6, IE7, and IE8, especially in regards to javascript and jQuery.\ \ Issues / Solutions:\ 1. HTML5 is not supported on a document, html5 elements will not properly contain contents\ * document.createElement('X') triggers support for 'X' element (you know this one, it's the "shiv I mean shim" method)\ 1. HTML5 is not supported with innerHTML\ * HTML5 added with innerHTML is supported when the element being innerHTML'd is already appended to a shim'd document (or document fragment!)\ 1. <HTML5_elements> become <:HTML5_elements> when element is cloneNode'd\ * use an alternate cloneNode function, the default is broken and should not be used in IE anyway (for example: it should not clone events)\ \ Example of solutions, in action, with comments:\ \ http://pastie.org/935834I wanted to propose some solutions to be used for some major HTML5 issues in IE6, IE7, and IE8, especially in regards to javascript and jQuery. \ \ Issues / Solutions: \ 1. HTML5 is not supported on a document, html5 elements will not properly contain contents \ * document.createElement('X') triggers support for 'X' element (you know this one, it's the "shiv I mean shim" method) \ 1. HTML5 is not supported with innerHTML \ * HTML5 added with innerHTML is supported when the element being innerHTML'd is already appended to a shim'd document (or document fragment!) \ 1. <HTML5_elements> become <:HTML5_elements> when element is cloneNode'd \ * use an alternate cloneNode function, the default is broken and should not be used in IE anyway (for example: it should not clone events) \ \ Example of solutions, in action, with comments: \ \ http://pastie.org/935834

Started looking at the code around this and I'm gonna leave my notes, in case they can help someone else...

Talked with jdbarlett about this at TXJS and we agreed the shiv'ing approach within Shimprove http://www.iecss.com/shimprove/ is probably a better choice here. Well, actually the pastie jon linked in this issue's description has that code in a more readable format.

Essentially, that approach is this:

var frag = document.createDocumentFragment();
frag.createElement('abbr');
frag.createElement('aside');
// etc, ...

// fragment can now accept unknown element nodes

It looks like we'll want test coverage for:

  • html() when using the innerHTML shortcut fast path
  • clone()
  • append/prepend/before/after/replaceWith and appendto/prependto/insertbefore/insertafter/replaceAll and wrap/wrapInner/wrapAll ... all use domManip so really only a single code path there should be sufficient.

Implementation notes:

  • Appears as though everything is within manipulation.js
  • buildFragment() is used by domManip and looks to be the right place to improve things
  • a docFrag is made before sending it off to jQuery.clean() along with the html string. We could shiv it before clean or maybe within clean
  • We'll probably want a test in $.support to know if a browser collapses unknown elems. The test used in Modernizr would work well.

Open questions:

  • regex to test against incoming html? (or some indexOf magic?)
  • There is an innerHTML set action inside of clean(). Does that collapse unknown elements, or no, since it's still off-dom?

Changed June 22, 2011 05:03PM UTC by paul.irish comment:25

WIP here: https://github.com/paulirish/jquery/commits/ticket6485

  • unit test coverage and $.support.unknownElems added.

so far, the .innerHTML use from within clean() is looking like trouble that'll have to be worked around

Changed June 28, 2011 08:47PM UTC by aspilicious comment:26

Drupal is working on his drupal8 release. We are planning to include shiv (inner shiv) stuff because we are going to go html5 all the way. BUT apparantly jquery is going to integrate those things for us in their next release.

Correct? When will this happen? 3 months? 6 months? a year? I would like to get this info so we can make a roadmap for drupal8.

Thnx!

Changed June 28, 2011 11:28PM UTC by jon_neal comment:27

I tracked the bugs down to manipulation.js, within the clean function, specifically where html strings are converted into DOM nodes; the line that reads.

div = context.createElement("div")

This element is used to append the strings, and it's not part of a shimmed document. I successfully experimented by adding the following.

html5elementsArr = 'abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|subline|summary|time|video'.split('|'),
html5elementsArrLen = html5elementsArr.length,
html5elementsArrCar = -1,						
html5safeFrag = context.createDocumentFragment();
if (html5safeFrag.createElement) while (++html5elementsArrCar < html5elementsArrLen) html5safeFrag.createElement(html5elementsArr[html5elementsArrCar]);
html5safeFrag.appendChild(div);

Of course, this html5safe fragment could have been previously generated, but for experimental purposes it worked, completely. I ran the unit tests that Paul Irish shared, and loaded up old IE7 and IE8. They passed: 100%.

Changed June 28, 2011 11:40PM UTC by paul.irish comment:28

I think we got success here. :)

I can take point to integrate that code in jquery style, commit that and PR it.

The test suite index.html will also need the basic html5 shiv run on it for some of these new tests to pass in IE. I hope that's okay.

Changed June 29, 2011 12:19AM UTC by paul.irish comment:29

Committed Jon's raw patch to my branch.. https://github.com/paulirish/jquery/commits/ticket6485

snover indicates we'll probably need a test similar to https://github.com/jquery/jquery/commit/0a0cf/#diff-1

for this patch.

Changed June 29, 2011 02:04PM UTC by rwaldron comment:30

Is there anyway that we can handle creation of elements without maintaining an internal hard-coded list? I seem to recall seeing something somewhere...

Changed July 11, 2011 08:48PM UTC by ajpiano comment:31

milestone: 1.next1.7

Changed July 12, 2011 08:09PM UTC by john comment:32

#9496 is a duplicate of this ticket.

Changed July 29, 2011 08:51PM UTC by paul.irish comment:33

snover gave some feedback to Jonathan the day we were working on this that was useful so I tracked it back down and it's cleaned up and available here http://oksoclap.com/fNZvdYRdAU

Changed August 15, 2011 08:50PM UTC by dmethvin comment:34

owner: → rwaldron
status: openassigned

Changed August 31, 2011 07:44PM UTC by rwaldron comment:35

_comment0: Worked on this today, but ultimately, I'm hitting walls. Here are screen shots of one of the tests when I pull the branch as-is (resolving a minor conflict is required) \ \ IE8 http://gyazo.com/950889903bb10ad7e947ef221b9b2a16.png \ \ IE7 http://gyazo.com/127aca2933a2f3905bdcc80ba07ae23f.png \ \ IE6 http://gyazo.com/4a16f40faf1fe6c4da40b83949d359c8.png \ 1314819971060167

Worked on this today, but ultimately, I'm hitting walls. Here are screen shots of one of the tests when I pull the branch as-is (resolving a minor conflict is required)

IE8 http://gyazo.com/950889903bb10ad7e947ef221b9b2a16.png

IE7 http://gyazo.com/127aca2933a2f3905bdcc80ba07ae23f.png

IE6 http://gyazo.com/4a16f40faf1fe6c4da40b83949d359c8.png

When I change the test to use:

article.width()

The result changes in IE8

http://gyazo.com/f524046a6b4b7aa51ab83f2adb54c804.png

Changed August 31, 2011 09:20PM UTC by rwaldron comment:36

_comment0: More research stuff... \ \ Running this fiddle: http://jsfiddle.net/rwaldron/t6hqK/show \ \ Produces the following results: \ \ \ http://gyazo.com/4f54690fa9126ea78285b71518d97c76.png1314825721581785

More research stuff...

Running this fiddle: http://jsfiddle.net/rwaldron/t6hqK/show

Produces the following results:

IE vs. FF http://gyazo.com/4f54690fa9126ea78285b71518d97c76.png

IE6, 7, 8 http://gyazo.com/de3be2b41f306b06ec9cc86269f7a3d8.png

Changed August 31, 2011 10:06PM UTC by jonathantneal@hotmail.com comment:37

rwaldon, unless specified by the browser or the CSS, elements are display: inline by default, so IE is handling them the way it would normally handle inline elements

Running this fiddle: http://jsfiddle.net/t6hqK/5/show/

Produces the following results in IE6: http://s4.postimage.org/5hrhkupqg/ie6_html5.png

Changed September 07, 2011 04:14PM UTC by paul.irish comment:38

description: I wanted to propose some solutions to be used for some major HTML5 issues in IE6, IE7, and IE8, especially in regards to javascript and jQuery. \ \ Issues / Solutions: \ 1. HTML5 is not supported on a document, html5 elements will not properly contain contents \ * document.createElement('X') triggers support for 'X' element (you know this one, it's the "shiv I mean shim" method) \ 1. HTML5 is not supported with innerHTML \ * HTML5 added with innerHTML is supported when the element being innerHTML'd is already appended to a shim'd document (or document fragment!) \ 1. <HTML5_elements> become <:HTML5_elements> when element is cloneNode'd \ * use an alternate cloneNode function, the default is broken and should not be used in IE anyway (for example: it should not clone events) \ \ Example of solutions, in action, with comments: \ \ http://pastie.org/935834I wanted to propose some solutions to be used for some major HTML5 issues in IE6, IE7, and IE8, especially in regards to javascript and jQuery. \ \ Issues / Solutions: \ 1. HTML5 is not supported on a document, html5 elements will not properly contain contents \ * document.createElement('X') triggers support for 'X' element (you know this one, it's the "shiv I mean shim" method) \ 1. HTML5 is not supported with innerHTML \ * HTML5 added with innerHTML is supported when the element being innerHTML'd is already appended to a shim'd document (or document fragment!) \ 1. <HTML5_elements> become <:HTML5_elements> when element is cloneNode'd \ * use an alternate cloneNode function, the default is broken and should not be used in IE anyway (for example: it should not clone events) \ \ Example of solutions, in action, with comments: \ \ http://pastie.org/935834 \ \ \ ------------- \ \ EDIT by paulirish.. the scope of this ticket it only to fix #2 and #3. the markup in the document will still require the basic html5shiv/modernizr to adjust. \ \ this fix will correct the assumption that "jquery is broken" because it cannot handle ajax'd in html5 content and the like.

Changed September 07, 2011 05:18PM UTC by rwaldron comment:39

Changed September 15, 2011 04:54PM UTC by rwaldron comment:40

#10283 is a duplicate of this ticket.

Changed September 15, 2011 05:14PM UTC by Haprog comment:41

+1, I just spent a whole day at work figuring out why my code breaks on IE8 and older. It would really help if there was a good solution to this issue.

Changed September 15, 2011 05:16PM UTC by rwaldron comment:42

@Haprog This is coming in 1.7, barring any disastrous findings :)

Changed September 19, 2011 08:47PM UTC by Rick Waldron comment:43

resolution: → fixed
status: assignedclosed

Landing pull request 490. 1.7 HTML5 Support for innerHTML, clone & style. Fixes #6485.

More Details:

Changeset: 9ecdb2472be7661477564e46bce51432d4a5a84e

Changed October 05, 2011 02:41PM UTC by ajpiano comment:44

#10427 is a duplicate of this ticket.

Changed October 06, 2011 09:12AM UTC by bmustiata comment:45

If I may, I think this issue should be extended to really support unknown elements for IE7/8. The problem is that the current implementation has ''a list of unknown'' elements.

This causes in my view (at least) two problems:

1. If tomorrow html5 decide to add a new element, old versions of the applications that use the current jQuery version will suddenly stop working until they upgrade their jQuery, and for any new element this list must be upgraded.

2. This approach also doesn't allow custom elements to be created that are not (and will never be) part of HTML5. We are actually using this in an application, where we create custom rendered metadata nodes on the fly (we receive them via AJAX). Elements are things like <loop>, <metatarget>, etc.

I am currently working on a fork where I try to allow creation of completely unknown elements, because currently (in the 1.7 beta):

jQuery('<customelement>some content</customelement>');

has a different outcome in IE8 than in IE9 (or any other decent browser).

I hope you find these requirements acceptable for reopening this, or even better in my opinion reopening the duplicate issue 10427. (since HTML5 support is implemented, and only custom elements are not working).

Changed October 14, 2011 02:20PM UTC by jdbartlett comment:46

Perhaps it'd be more appropriate to open a new bug for this (please yell if so), but it looks like this has been marked "fixed" prematurely; I tried innerShiv's test page with jQ1.7b2 and Test 2 (which checks for innerShiv support built into jQuery) fails in IE8 :o :( :_(

http://jsbin.com/igerig

Looking at the DOM tree, IE seems to be recognizing the elements properly, and I can style them if I use class names, but it's not styling based on tag names alone.

Changed October 14, 2011 06:12PM UTC by rwaldron comment:47

description: I wanted to propose some solutions to be used for some major HTML5 issues in IE6, IE7, and IE8, especially in regards to javascript and jQuery. \ \ Issues / Solutions: \ 1. HTML5 is not supported on a document, html5 elements will not properly contain contents \ * document.createElement('X') triggers support for 'X' element (you know this one, it's the "shiv I mean shim" method) \ 1. HTML5 is not supported with innerHTML \ * HTML5 added with innerHTML is supported when the element being innerHTML'd is already appended to a shim'd document (or document fragment!) \ 1. <HTML5_elements> become <:HTML5_elements> when element is cloneNode'd \ * use an alternate cloneNode function, the default is broken and should not be used in IE anyway (for example: it should not clone events) \ \ Example of solutions, in action, with comments: \ \ http://pastie.org/935834 \ \ \ ------------- \ \ EDIT by paulirish.. the scope of this ticket it only to fix #2 and #3. the markup in the document will still require the basic html5shiv/modernizr to adjust. \ \ this fix will correct the assumption that "jquery is broken" because it cannot handle ajax'd in html5 content and the like. I wanted to propose some solutions to be used for some major HTML5 issues in IE6, IE7, and IE8, especially in regards to javascript and jQuery. \ \ Issues / Solutions: \ 1. HTML5 is not supported on a document, html5 elements will not properly contain contents \ * document.createElement('X') triggers support for 'X' element (you know this one, it's the "shiv I mean shim" method) \ 1. HTML5 is not supported with innerHTML \ * HTML5 added with innerHTML is supported when the element being innerHTML'd is already appended to a shim'd document (or document fragment!) \ 1. <HTML5_elements> become <:HTML5_elements> when element is cloneNode'd \ * use an alternate cloneNode function, the default is broken and should not be used in IE anyway (for example: it should not clone events) \ \ Example of solutions, in action, with comments: \ \ \ \ \ ------------- \ \ EDIT by paulirish.. the scope of this ticket it only to fix #2 and #3. the markup in the document will still require the basic html5shiv/modernizr to adjust. \ \ this fix will correct the assumption that "jquery is broken" because it cannot handle ajax'd in html5 content and the like.

I'm not at a machine that I can test from, but the first thing that comes to mind is that you'll still need to shiv/shim (whatever) the elements themselves - jQuery has no intention of providing that.

Changed October 14, 2011 06:33PM UTC by rwaldron comment:48

description: I wanted to propose some solutions to be used for some major HTML5 issues in IE6, IE7, and IE8, especially in regards to javascript and jQuery. \ \ Issues / Solutions: \ 1. HTML5 is not supported on a document, html5 elements will not properly contain contents \ * document.createElement('X') triggers support for 'X' element (you know this one, it's the "shiv I mean shim" method) \ 1. HTML5 is not supported with innerHTML \ * HTML5 added with innerHTML is supported when the element being innerHTML'd is already appended to a shim'd document (or document fragment!) \ 1. <HTML5_elements> become <:HTML5_elements> when element is cloneNode'd \ * use an alternate cloneNode function, the default is broken and should not be used in IE anyway (for example: it should not clone events) \ \ Example of solutions, in action, with comments: \ \ \ \ \ ------------- \ \ EDIT by paulirish.. the scope of this ticket it only to fix #2 and #3. the markup in the document will still require the basic html5shiv/modernizr to adjust. \ \ this fix will correct the assumption that "jquery is broken" because it cannot handle ajax'd in html5 content and the like. I wanted to propose some solutions to be used for some major HTML5 issues in IE6, IE7, and IE8, especially in regards to javascript and jQuery. \ \ Issues / Solutions: \ 1. HTML5 is not supported on a document, html5 elements will not properly contain contents \ * document.createElement('X') triggers support for 'X' element (you know this one, it's the "shiv I mean shim" method) \ 1. HTML5 is not supported with innerHTML \ * HTML5 added with innerHTML is supported when the element being innerHTML'd is already appended to a shim'd document (or document fragment!) \ 1. <HTML5_elements> become <:HTML5_elements> when element is cloneNode'd \ * use an alternate cloneNode function, the default is broken and should not be used in IE anyway (for example: it should not clone events) \ \ Example of solutions, in action, with comments: \ \ http://pastie.org/935834 \ \ \ ------------- \ \ EDIT by paulirish.. the scope of this ticket it only to fix #2 and #3. the markup in the document will still require the basic html5shiv/modernizr to adjust. \ \ this fix will correct the assumption that "jquery is broken" because it cannot handle ajax'd in html5 content and the like.

Sorry, my mobile browser seems to like to remove urls from the original description text

Changed October 14, 2011 09:25PM UTC by anonymous comment:49

Yeah, innerShiv's test page includes Rem's HTML5shim (otherwise none of the tests would pass at all) -- it's actually the test set I used when developing the original innerShiv. jQuery 1.7's HTML5 support is substantially the same technique as innerShiv, which is why it's so odd that this isn't working. Either I've done something really stupid in the test page, or something's going on between the HTML being cleaned and appended that's causing the breakage.

Changed October 14, 2011 09:26PM UTC by jdbartlett comment:50

(That last "anonymous" was me again, BTW!)

Changed October 14, 2011 09:37PM UTC by rwaldron comment:51

Would be nice if all of those tests appeared on screen without the need for scrolling. I screen capped this: http://gyazo.com/d02e3887ccc6c561915421e43cad02b8.png running in IE7 via BrowserStack - not sure if that's even useful or meaningful

Changed October 14, 2011 09:59PM UTC by jdbartlett comment:52

It's just the 2nd test that's affected (the other tests use innerShiv). Here's another version with the other tests removed:

http://jsbin.com/igerig/3

Expected result (seen in IE9 and good browsers): http://d.pr/MKFP

Actual result (seen in IE6, IE7, IE8): http://d.pr/SSZk

HTML5shim is included (line 27 of the source).

Line 51 of the source shows the test that's being used.

Changed October 14, 2011 10:08PM UTC by rwaldron comment:53

Maybe I'm missing something... I see the same thing in both screenshots.

Changed October 14, 2011 10:20PM UTC by jdbartlett comment:54

Ah. The section element's background color in the IE<=8 screenshot is red, whereas it's red in the IE9 screenshot.

But never mind that! Here's an even simpler demonstration:

http://jsbin.com/obomec

In this demonstration, jQuery appends a section to an article. The CSS uses the "section" tag as a selector to style the section's background pink. Works in all good browsers, but ''not'' in IE <= 8. :(

Here's exactly the same code, but using a class name ("pink") instead of an HTML5 tag name as a selector:

http://jsbin.com/obomec/2/

When using a class name as a selector instead of a tag name, the page is styled successfully.

innerShiv uses _exactly_ the same technique as the jQuery 1.7 fix, but I've never before encountered this problem with being able to style based of class selectors but not tags, which is why I suspect something's happening between the innerShiv fix and the append.

Hope that helps clarify the problem.

Changed October 14, 2011 10:22PM UTC by jdbartlett comment:55

"The section element's background color in the IE<=8 screenshot is red, whereas it's red in the IE9 screenshot."

Ugh. Obviously, I meant to say:

"The section element's background color in the IE<=8 screenshot is red, whereas it's GREEN in the IE9 screenshot."

GREEN! GREEN, damn it! There is a difference! Honest! :)

But anyway. The other demonstration is much easier code to read.

Changed October 14, 2011 11:08PM UTC by rwaldron comment:56

Changed November 16, 2011 10:15PM UTC by heruan@aldu.net comment:57

Is the cloning issue fixed? I still get <:section></:section> on cloned <section>s in IE8 (with jQuery 1.7 and html5shiv).

Changed November 17, 2011 01:29AM UTC by rwaldron comment:58

Fix is coming in 1.7.1

Changed December 16, 2011 10:42PM UTC by anonymous comment:59

I'm using 1.7.1 and I still get the ":"-bug using clone(). Are there any news regarding this bug?

Changed August 23, 2012 10:38AM UTC by anonymous comment:60

This is still happening as of 1.8, anyone have a fix for this they would like to share?

Changed August 23, 2012 12:46PM UTC by dmethvin comment:61

This is still happening as of 1.8, anyone have a fix for this they would like to share?

I have no idea what "this" you are referring to but I am sure it can be answered better on a forum than on a closed bug tracker ticket.

Changed October 17, 2012 08:50PM UTC by anonymous comment:62

I think 'this' is referring to cloning still not working. I have the same problem using 1.8.2 with Modernizr 2.6.1.