insertBefore fails when target is inline and previous non-empty sibling is inline and ends with a line break in Webkit

[[email protected]…]

html: <span>abc<br></span> <a href="#">link</a>

JS: $("a").click(function(){

$("span").clone().insertBefore(this);

});

this works, though: $("span").clone().insertBefore(this); $("span").clone().insertAfter(this);

maybe it's a Chrome bug, not jQuery

[[email protected]…]

sorry, did not notice the link to jsFiddle

bug demo (open in Chrome): ​http://jsfiddle.net/SZtbk/1/

this works: ​http://jsfiddle.net/4Hukj/

[snover]

This is not a jQuery bug.

Criteria:

1. The inserted element must be an inline element
2. The element must be inserted using insertBefore
3. The first previous non-empty, non-white-space-only, non-text-node sibling element of the target of the insert must:
   1. Be inline and
   2. End with a line break
4. There must be at least one text node, empty node, or white-space only node between the sibling containing the line break and the target

If all these criteria are met, the inserted elements will not appear until another, different DOM manipulation occurs that does not match these criteria (even though the DOM manipulation occurs successfully).

[SlexAxton]

This seems like a browser quirk we should try and smooth out, but first we'll report it to chrome and see if we can't get it pushed before we can fix it :D

[SlexAxton]

temp01 graciously pointed out that this is a webkit bug, not just a chrome-specific bug. He is correct.

[ajpiano]

"temp01 graciously pointed out that this is a webkit bug, not just a chrome-specific bug. He is correct."

He really is a great guy.

[temp01]

He has reported the bug to WebKit: ​https://bugs.webkit.org/show_bug.cgi?id=50315

[[email protected]…]

Replying to snover:

This is not a jQuery bug.

Criteria:

1. The inserted element must be an inline element
2. The element must be inserted using insertBefore
3. The first previous non-empty, non-white-space-only, non-text-node sibling element of the target of the insert must:
   1. Be inline and
   2. End with a line break (on the same line)
4. There must be at least one text node, empty node, or white-space only node between the sibling containing the line break and the target

If all these criteria are met, the inserted elements will not appear until another, different DOM manipulation occurs that does not match these criteria (even though the DOM manipulation occurs successfully).

[dmethvin]

Here is an example that doesn't use jQuery but shows the problem.

​http://jsfiddle.net/SZtbk/12/

I agree that this is a webkit bug, and that temp01 really is a great guy. If it were more critical we could work around it but at this point it doesn't seem like a very frequently encountered case.

I'm going to close this and you can track Webkit's progress via the link further up the ticket.

[[email protected]…]

than you all, nice to see your attention! does not seem like webkid guys care, unfortunately