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:
[code lang=’css’]
a{
border: 1px solid transparent;
}
a.active_link{
border: 1px solid blue;
}
[/code]
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! 😉
I’d be curious to know if it did the same if you replaced border with outline.
If it did, it would be easy with that to pass border to just the IE’s purely via CSS since they don’t understand the outline property.
i’ll let you know when i try it out tomorrow 🙂 good thought!
just tried out the outline property, and it works like a charm 🙂 thanks!
Safari + Firefox use the outline property, IE7 uses the border property mentioned in the post above, and IE6 never worked in the first place, so it still doesn’t show anything. not bad!