One of my primary projects that I work on at Jive is the rich text editor for Clearspace. I first joined Jive last April and began work completely revamping the RTE for the 2.5 release. Over the course of development and during bug squashing since then, Iāve seen some crazy bugs in various browsers, but I wanted to highlight one I just spent the better part of the day debugging.
Our RTE is a heavily modified TinyMCE editor with lotsĀ of custom Jive plugins. Most of the custom work weāve done fixes small bugs and inconsistencies of TinyMCE across Safari, Firefox, and IE 6 & 7, but some of our customizations are just nice UI touches to make the experience just a little bit easier.
One such feature is the blue border around link text when the cursor is āinsideā the anchor tag. Here is a quick video showing link borders working correctly in Firefox:
Oddly enough, there was a bug in Safari that didnāt let the cursor escape that link tag when pressing the down arrow key. In fact, the blue border downright trapped the cursor, even when it was nowhere near the anchor tag. Check out the video below showing the error in Safari when using arrow keys to navigate the document:
Since this wasnāt happening in a default install of TinyMCE, I assumed that somewhere our custom javascript was screwing things up in Safari ā but after reverting all of our changes back to the default TinyMCE source files with zero plugins, I could still reproduce the error!
Of all things, it turned out to be a problem with how Safari handles the CSS for the anchor tag. Leaving either or both of these rules causes the funky cursor behavior in Safari. Removing both of the rules below solved the problem:
a{
Ā Ā Ā border: 1px solid transparent;
}
a.active_link{
Ā Ā Ā border: 1px solid blue;
}
So if youāre ever trying to add borders around links in TinyMCE in Safari, you can now rest assured that you canāt without adding some really wonky cursor problems. š
Of course, removing these CSS rules would mean that not only Safari wouldnāt see borders, but Firefox and IE would also be borderless. š Not wanting to sacrifice usability, I wanted to find a way to turn this off only for Safari, but leave it enabled for the other browsers.
My constraints: donāt serve different CSS files to different browsers (hell to maintain), and donāt serve an additional CSS file to non-Safari browsers (donāt want more http requests).
The fix was to pull those 2 CSS rules out of our custom content.css file, and use a TinyMCE plugin to insert them dynamically when the editor initializes. If TinyMCE finds that itās running in Safari, nothing happens and that CSS isnāt run, but if itās notĀ Safari, then dynamically create a <style> tag with those 2 CSS rules and add it to the <head> of the editorās iframe.
Iām sure Iām hitting a broad audience when I say: Hopefully as you develop your own highly customized RTE based on TinyMCE for your company, and find funny cursor problems in Safari when adding borders to your links, you wonāt spend as much time as I have and will know just what to do! š