Why does my contentEditable element become draggable/resizable in Firefox?

Question

I'll be answering this question

To my great surprise, I discovered that, after using JavaScript to apply a class to an element and make it contentEditable, the element suddenly gained draggable and resizable UI elements. This only occurs in Firefox.

Why does this happen and how can I fix it?

Answer 1

Firefox has a bug where it adds this functionality even though it is non-standard, not implemented by any other browser and not applied through a proprietary switch (i.e. not -moz-whatever). You can see the bug report for it here.

The conditions under which it occurs are that an element must both have the contentEditable attribute and be positioned absolutely.

In order to get around it you can do the following:

1. Don't use position:absolute. In my case, I was able to use position:fixed instead.
2. Put the contentEditable element inside of a parent and position that absolutely.