Prevent Chrome from wrapping contents of joined with a

Question

I have observed an undesirable behaviour in Chrome that occurs when one joins two

\'s by deleting the separation between them. Although the

Answer 1

Found this link from a comment posted on someone's blog:

(Fixed bug where the latest WebKit versions would produce span element…) https://github.com/tinymce/tinymce/commit/8e6422aefa9b6cc526a218559eaf036f1d2868cf

Answer 2

This irritated me as well, but I found a solution that works well enough for now.

$('#container span').filter(function() {
    $(this).removeAttr("style");
    return $(this).html().trim().length == 0;
}).remove();

I simply remove the style tag from the span element and remove it altogether if it's empty. You could probably filter based on the attribute style, but as I'm already doing a loop to check to remove empty spans, I thought it was best to do both at the same time.

It does create a flicker for a microsecond when chrome first tries to insert the style inherited for the span, but you only see that once immediately after deletion.

It isn't perfect, but it's quick and concise.