Skip to content
jejacks0n edited this page Jun 13, 2012 · 8 revisions

There's several inconsistencies between the supported browsers and how they've implemented various contentEditable features. We've taken every effort to normalize these issues, but some are browser bugs are out of our control. This page is intended to document those, and how they impact Mercury.

This page is broken into categories based on the browser engine and vendor. When we use the term Mozilla we mean the Gecko rendering engine, because they're more or less synonymous. Chrome and Safari share the same rendering engine (webkit), but because of the variants of Javascript engines (V8 vs. Nitro) there seems to be a divergence with how each handles some aspects of contentEditable elements. This page groups them into Webkit because some behaviors are shared, and calls out the different behaviors when applicable. We refer to contentEditable elements as regions to simplify the terminology.

Because of these considerable differences in how the browsers have implemented contentEditable features, it's generally recommended to use a single browser vendor while editing pages of a given project.

Mozilla

  • Justification fails with an exception on the first line of a region if it isn't wrapped in an element. Wrap the content in something before trying to justify.
  • When indenting, if there isn't a tag in the content the blockquote is placed outside of the region (directly preceding it) and raises an exception. The blockquote is removed by Mercury. Add at least a br tag for indenting to function.
  • Creating a region makes double clicking in textareas fail. No fix - Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=490367
  • Pressing enter in non div regions (a contentEditable element that isn't a div) results in some odd behavior. Using non div elements is discouraged, and pressing enter in them is disabled. No fix.
  • If a table is at the beginning or end of a region, it's impossible to get the cursor out of the table and into the first position, or last position depending on if it's at the start or end of the region content.

Webkit

  • When copying content all user defined styles are embedded into style attributes. Mercury has a configuration for stripping these out, which is turned on by default.
  • When there's only non editable elements within a region you can't get cursor placement. We try to work around this by putting a null string at the end of the region (you may see this -- the region grows, but when saved or previewed the null character isn't included).

Chrome

Safari

  • When calling focus on a region the entire contents of the region are selected. We've worked around this, but there are times when focus isn't fully given back to the region, and a manual click is required.
  • File uploading doesn't work in safari 5, but does work in safari 5.1.5 (safari 5 hadn't implemented FileReader)