DOM elements appearing inexplicably

Question

I've encountered a strange bug in a web application I've been working on that I've been able to reproduce in Chrome and Safari, but not Firefox.

To see the bug, visit www.lastcalc.com and type a single upper-case character. The character will immediately be highlighted with a white "button" css through a listener on the "keydown" event on the DIV.question (the DIV with contentEditable set to true). This is performed by the highlightSyntax function in locutus.js and relies on the Rangy library to keep track of the cursor position during highlighting.

So far so good, but now hit delete. Suddenly in Safari the following structure appears, with the cursor at the br element in the middle (visually the text is centered and gets the color #606060):

<div style="text-align: center;">
    <font class="Apple-style-span" color="#606060">
        <span class="Apple-style-span" style="font-size: 14px;">
           <br/>
        </span>
    </font>
</div>

In Chrome it's slightly different:

<div style="text-align: center;">
    <font color="#606060">
        <span style="font-size: 14px;">
            <br/>
        </span>
    </font>
</div>

So far as I'm aware, nothing in my code is creating any of these elements, yet they appear. The only place in my code the #606060 color is mentioned is in highlighting.css in the definition for the "white" class, which is the class assigned to the "span" element that would have been deleted when I hit backspace.

It seems like there is some kind of browser voodoo going on here that is somehow going wrong - can anyone shed some light on this?

ps. If anyone is wondering what this website is you can find out more here.

edit: After some Googling it seems that this may be a bug in webkit, so now the question is: how can I workaround it?

Answer 1

I have found the following workaround, which basically involves using JQuery to remove the offending divs and spans, while making sure not to remove the span used by Rangy to keep track of the cursor position, I do this every time there is a keyup event on the editable div:

element.find("span.highlighted,font[color],div,span:not(.rangySelectionBoundary)").replaceWith(function() {
    return $(this).contents();
});

It solved my problem, but it seems that the actual bug is in WebKit.