BROWSERINCONSISTENCIES.md

List of contenteditable Browser Inconsistencies

Playground: https://uhm0pk9mp2n40.julianrbryant.com/iwEWUXo/2/edit?js,console,output

document.execCommand commands

• Firefox: When the contenteditable element is a custom element, an error is thrown when trying to apply one of the following commands. As per: https://uhm0pk9mp2n40.julianrbryant.com/etepiPOn/1/edit?html,css,js,console,output
• Chrome has some magic to re-focus the contenteditable when a command is executed and the selection is not collapsed: https://uhm0pk9mp2n40.julianrbryant.com/papi/1/edit?html,js,output
• "insertBrOnReturn": https://uhm0pk9mp2n40.julianrbryant.com/IQUraXA/1/edit?html,js,output
• "insertHTML":
  • https://uhm0pk9mp2n40.julianrbryant.com/elicInov/2/edit?html,js,output
  • Chrome tries to be clever by applying inline styles/SPANs with line- height: https://uhm0pk9mp2n40.julianrbryant.com/ilEmudi/4/edit?css,js,output
  • Chrome applies styling to invalid markup, Firefox allows invalid markup: https://uhm0pk9mp2n40.julianrbryant.com/ObiBoweG/1/edit?js,console,output
  • Given an empty P element, Chrome will wrap inserted text nodes not in a P, whereas Firefox will not: https://uhm0pk9mp2n40.julianrbryant.com/olEbecEM/1/edit?js,output
  • Given content of <p>1|</p>, when inserting HTML of <p>2</p>, Chrome will merge the inserted P element into the existing P element, whereas Firefox will not: https://uhm0pk9mp2n40.julianrbryant.com/uvEdacoz/6/edit?js,output
  • Given content of <p>1|</p>, when inserting HTML of <p>2<o></o></p>, Chrome will merge the inserted P element into the existing P element excluding any custom elements, whereas Firefox will not: https://uhm0pk9mp2n40.julianrbryant.com/tuleq/3/edit?js,output
  • Given content of <p>1<br>|</p>, when inserting HTML of 2<p>3</p>, Chrome will append the inserted unwrapped text node immediately into the existing paragraph, whereas Firefox will append a BR element followed by the text node: https://uhm0pk9mp2n40.julianrbryant.com/uvEdacoz/7/edit?js,output
  • Given a selection across multiple P elements, Firefox will insert the content outside of any P element: https://uhm0pk9mp2n40.julianrbryant.com/jiviniti/4/edit?js,output
• "formatBlock": https://uhm0pk9mp2n40.julianrbryant.com/UTUDaPoC/1/edit?html,js,output
• "bold": https://uhm0pk9mp2n40.julianrbryant.com/IxiSeYO/4/edit?html,js,output
• "outdent":
  • Chrome removes BLOCKQUOTE content formatting: https://uhm0pk9mp2n40.julianrbryant.com/okAYaHa/1/edit?html,js,output
  • Chrome removes collapsed selection formatting: https://uhm0pk9mp2n40.julianrbryant.com/IfaRaFO/1/edit?html,js,output
• "insertOrderedList"/"insertOrderedList":
  • Chrome nests list inside of block elements: https://uhm0pk9mp2n40.julianrbryant.com/eFiRedUc/1/edit?html,js,output
  • Chrome removes SPAN: https://uhm0pk9mp2n40.julianrbryant.com/abOLUNU/1/edit?html,js,output
  • Chrome tries to be clever by applying inline styles/SPANs with line- height: https://uhm0pk9mp2n40.julianrbryant.com/OtemujAY/10/edit?html,css,js,output
  • Chrome does not add a BR element when there is no DOCTYPE: https://uhm0pk9mp2n40.julianrbryant.com/sasec/1/edit?js,console,output https://un5kwkagu6hvpvz93w.julianrbryant.com/p/chromium/issues/detail?id=396654&thanks=396654&ts=1406132418
• "indent":
  • Chrome nests BLOCKQUOTE inside of P: https://uhm0pk9mp2n40.julianrbryant.com/oDOriyU/3/edit?html,js,output
  • Chrome nests ULs inside of ULs:
    • https://uhm0pk9mp2n40.julianrbryant.com/ORikUPa/3/edit?html,js,output
    • https://uhm0pk9mp2n40.julianrbryant.com/kuvi/1/edit?js,output
  • Chrome adds redundant style attribute: https://uhm0pk9mp2n40.julianrbryant.com/AkasOzu/1/edit?html,js,output
  • Chrome converts BRs to Ps: https://uhm0pk9mp2n40.julianrbryant.com/zeti/2/edit?js,output
  • Firefox does not perform transformation upon Ps containing BRs: https://uhm0pk9mp2n40.julianrbryant.com/yiyaq/1/edit?js,output
• "createLink"
  • Firefox does not create A if selection is empty: https://uhm0pk9mp2n40.julianrbryant.com/tutufi/2/edit?js,output
• "delete":
  • Given a selection across multiple P elements, Firefox will place the caret outside of any P element: https://uhm0pk9mp2n40.julianrbryant.com/xopivama/3/edit?js,output

Document.queryCommandState

• Browser magic: Chrome and Firefox report command state to be true after applying a command to a collapsed selection, but why?: https://uhm0pk9mp2n40.julianrbryant.com/eDOxacI/1/edit?js,console,output
• superscript: Firefox: Returns false when a whole SUP is selected: https://uhm0pk9mp2n40.julianrbryant.com/marox/1/edit?js,console,output
• subscript: Firefox: Returns false when a whole SUB is selected: https://uhm0pk9mp2n40.julianrbryant.com/marox/1/edit?js,console,output
  • True for all inline elements?
• Firefox throws NS_ERROR_UNEXPECTED error for insertUnorderedList and insertOrderedList when a contenteditable is not focussed, see: #208

Element.focus

• Firefox: Giving focus to a contenteditable will place the caret outside of any block elements. Chrome behaves correctly by placing the caret at the earliest point possible inside the first block element: https://uhm0pk9mp2n40.julianrbryant.com/eLoFOku/1/edit?js,console,output

Events

• Chrome tries to be clever by applying inline styles/SPANs with line-height on <backspace> or <delete> keyboard events: https://uhm0pk9mp2n40.julianrbryant.com/isIdoKA/3/edit?html,css,js,output
• Firefox breaks out of P mode on <backspace> or <delete> keyboard events when HTML has indentation between block elements: https://uhm0pk9mp2n40.julianrbryant.com/EyuKase/1/edit?js,output

Other

• Chrome (<= 28(?)): TreeWalker does not work properly with DocumentFragments: https://umn0dj60g6hnmy58wjzj8.julianrbryant.com/questions/21803827/chrome-28 -treewalker-not-working-with-documentfragments
• Firefox: Selection object never gets access to text nodes, only parent elements: https://uhm0pk9mp2n40.julianrbryant.com/rotus/2/edit?js,output,console

Range.commonAncestorContainer

• Firefox: Returns P when a whole SUP is selected: https://uhm0pk9mp2n40.julianrbryant.com/xoqul/1/edit?js,console,output

Selection.getRangeAt

• Chrome (< 42): Selection.getRangeAt() returns an incorrect range when in shadow DOM https://un5kwkagu6hvpvz93w.julianrbryant.com/p/chromium/issues/detail?id=380690

Selection.isCollapsed

• Chrome: Selection.isCollapsed is incorrect when in shadow DOM https://un5kwkagu6hvpvz93w.julianrbryant.com/p/chromium/issues/detail?id=447523 https://uhm0pk9mrt4aa0ygd7yg.julianrbryant.com/7zgegoda/2/