Bug Tracker

Modify

Ticket #10501 (closed bug: fixed)

Opened 3 years ago

Last modified 2 years ago

HTML5 element "innerShiv" inconsistent across html()/append()

Reported by: rwaldron Owned by: rwaldron
Priority: blocker Milestone: 1.7
Component: manipulation Version: 1.7b2
Keywords: Cc:
Blocking: Blocked by:

Description

Thanks to JD Bartlett for finding this issue. Running this example:  http://jsbin.com/obomec in <= IE8 will fail to set style on the newly created section element, however changing the code to use the html() method instead of append() will work correctly (  http://jsbin.com/obomec/5 )

See:  http://gyazo.com/23b3ccdde238542671eb301d28f00565.png

Change History

comment:1 Changed 3 years ago by rwaldron

  • Owner set to rwaldron
  • Priority changed from undecided to blocker
  • Status changed from new to assigned
  • Component changed from unfiled to manipulation
  • Milestone changed from None to 1.7

comment:2 Changed 3 years ago by jdbartlett

Seems to be an issue with IE<=8's Element#cloneNode. cloneNode is used by jQuery.clone, which is used by jQuery#domManip, which is used by jQuery.append.

When there are styles targeting a class associated with the HTML5 element being cloned, IE8 seems to act appropriately:  http://jsbin.com/obomec/2

comment:3 Changed 3 years ago by jdbartlett

Jonathan Neal's Shimprove tackles the cloneNode issue:  http://www.iecss.com/shimprove/

Shimprove overrides cloneNode with newCloneNode -- a method that grabs an element's outerHTML, creates a new element from that HTML within the context of a shim'd fragment, and then returns that element as its result. Badabing badaboom.

Obviously, jQuery shouldn't override any core browser functions, but internal use of a method similar to newCloneNode (on IE's where it's necessary) would fix this issue.

comment:5 Changed 3 years ago by timmywil

  • Status changed from assigned to closed
  • Resolution set to fixed

Landing pull request 550. IE6,7,8 cannot use cached fragments from unknown elems. Fixes #10501.

More Details:

comment:6 Changed 2 years ago by heruan@…

Is the clone() issue fixed in stable jQuery 1.7? I still get <:section></:section> on cloned <section>s in IE8.

comment:7 Changed 2 years ago by dmethvin

We never go back and change a file once it's released. The current code is always at  http://code.jquery.com/jquery-git.js so test against that. We will be releasing 1.7.1 soon.

comment:8 Changed 2 years ago by rwaldron

Also, for future reference, posting the same question on two tickets is unnecessary.

comment:9 Changed 2 years ago by Giovanni Lovato <heruan@…>

jquery-git.js fixes the issue for me, thanks!

comment:10 Changed 2 years ago by Giovanni Lovato <heruan@…>

Wait. jquery-git.js fixes the issue on .cloneNode() but *not* for .innerHtml() which for Ajax loaded HTML5 content screws all up in IE8:  http://pastebin.com/Y4GLa8Tc

comment:11 Changed 2 years ago by Andreas

I'm using 1.7.1 and I still get this bug when I try to do something like $('<some selector>').append($('<some selector to html5>'.clone(true)); in the IE8?

comment:12 follow-up: ↓ 13 Changed 2 years ago by drew@…

I have a better example of the inconsistencies that are still occurring.  http://jsfiddle.net/jjgMC/11/

It's impossible right now to use $.html() on elements that are not in the DOM, you must use $.append() in those cases.

comment:13 in reply to: ↑ 12 Changed 2 years ago by drew@…

Replying to drew@…:

I have a better example of the inconsistencies that are still occurring.  http://jsfiddle.net/jjgMC/11/

It's impossible right now to use $.html() on elements that are not in the DOM, you must use $.append() in those cases.

Also version  http://jsfiddle.net/jjgMC/12/ shows that jquery-git(as of 1/11/2012) also fails to correctly allow styles (but they all work in FF9/Webkit/IE9)

comment:14 Changed 2 years ago by rwaldron

jQuery's HTML5 support is not intended to be a "fix-all", Please be sure to use the latest "html5shiv":

 http://code.google.com/p/html5shiv/

See:  http://jsbin.com/egumes/2

Running in IE8:

 http://gyazo.com/1a8c2a9fe781e2f8f999f55906f9a2aa.png

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.