Bug Tracker

Opened 9 years ago

Last modified 7 years ago

#6485 closed feature

Solution for HTML5 in IE — at Version 21

Reported by: jonathantneal Owned by:
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 (last modified by addyosmani)

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)
  2. 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!)
  3. <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:


Change History (21)

comment:1 Changed 9 years ago by Rick Waldron

Keywords: needsreview added
Priority: undecided

comment:2 Changed 9 years ago by Rick Waldron

Resolution: invalid
Status: newclosed

comment:3 Changed 9 years ago by dmethvin

Keywords: needsreview removed

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.

comment:4 Changed 8 years ago by SlexAxton

Cc: paul.irish SlexAxton added
Keywords: html5 innershiv innershim needsreview added
Priority: undecidedhigh
Resolution: invalid
Status: closedreopened

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.

comment:5 Changed 8 years ago by paul.irish

#5327 is a duplicate of this ticket.

comment:6 Changed 8 years ago by paul.irish

Description: modified (diff)

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

comment:7 Changed 8 years ago by john

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.

comment:8 Changed 8 years ago by timmywil

Status: reopenedopen

comment:9 Changed 8 years ago by timmywil

#9049 is a duplicate of this ticket.

comment:10 Changed 8 years ago by john

Keywords: 1.7-discuss added

Nominating ticket for 1.7 discussion.

comment:11 Changed 8 years ago by Rick Waldron

Description: modified (diff)

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

comment:12 Changed 8 years ago by jaubourg

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

comment:13 Changed 8 years ago by timmywil

+1, I would use this a lot.

comment:14 Changed 8 years ago by ajpiano

Description: modified (diff)

+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..

Last edited 8 years ago by ajpiano (previous) (diff)

comment:15 Changed 8 years ago by paul.irish

+1, major painpoint for developers.

comment:16 Changed 8 years ago by dmethvin

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

comment:17 Changed 8 years ago by Rick Waldron

See also: #6286

comment:18 Changed 8 years ago by john

Description: modified (diff)

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

comment:19 Changed 8 years ago by scottgonzalez

+1, I'd like to see performance impact

comment:20 Changed 8 years ago by paul.irish

Description: modified (diff)

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 :)

comment:21 Changed 8 years ago by addyosmani

Description: modified (diff)


Note: See TracTickets for help on using tickets.