Skip to content
hughfdjackson edited this page Mar 15, 2012 · 6 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.

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.
  • Drag and drop is weirdly implemented. Work around this by pressing shift while dropping an image from your desktop for uploading.
  • 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.

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 because safari hasn't yet implemented the FileReader. Read this issue for more detailed information about why.