Safari: <span class="Apple-style-span"> created when inserting special characters

[Martin Kou]

Reproduction procedure:

1. Open sample01.html in Safari.
2. Apply "Red Title" style to the paragraph.
3. Insert a few special characters via the special character dialog in the paragraph.
4. The inserted characters aren't red and come with a strange <span class="Apple-style-span"> tag.

This seems to be a WebKit bug as the problem also appears when adding special characters via document.execCommand('inserthtml', false, $HTML) directly in Safari. But a short term workaround may be possible as well.

[Martin Kou]

I've filed a bug report to WebKit at ​https://bugs.webkit.org/show_bug.cgi?id=18423.

[Martin Kou]

Retracted the review request because a similar bug has been found in another dialog (fck_paste.html). Instead of adding a kludge in individual dialogs, it seems fixing the issue in FCK.InsertHtml() or in the document processor would make more sense now.

[Martin Kou]

Updated the patch such that the fix is generalized to fix all FCK.InsertHtml() calls.

[Alfonso Martínez de Lizarrondo]

I think that getElementsByTagName returns a live collection, so it's automatically updated whenever the content of the document changes, so in order to properly remove some node, the for must be done backwards, or it could miss the next node:

 	for ( var i = spans.length -1; i >= 0 ; i-- )

[Martin Kou]

Updated the patch according to Alfonso's suggestion.

[Alfonso Martínez de Lizarrondo]

Sorry, but I've remembered right now that ​Safari does support getElementsByClassName so we could use that instead of getting all the spans, and iterate through them to find which ones does have that class.

Another nice feature that might be useful for this kind of tasks is the ​Selectors API (I think that IE8 also does support it but I'm not sure right now)

Sorry :(

[Martin Kou]

The article you quoted was posted on December 21st, 2007... which is uncomfortably recent - Safari 3.0 was released before that. Are you sure the document.getElementsByClassName() method would run correctly for uses who didn't update their Safari browsers after 3.0? I don't really know as it seems there's no way I can find and install an older version of Safari 3.

I've changed the patch to use document.getElementsByClassName() if it is available and use the old DOM/JS method if not. This both gets the speed advantage of the getElementsByClassName() and ensures it would still work in case older Safari 3 doesn't support it.

[Alfonso Martínez de Lizarrondo]

Yes, I think that before 3.1 that method shouldn't be available and your patch does a nice job to take care of it.

I don't think that there will be too many people using the 3.0 versions, but it's better to be safe and avoid support requests due to this change.

[Martin Kou]

Fixed with [1951].

Click here for more info about our SVN system.