contenteditable not working in safari but works in chrome

Safari has the user-select CSS setting as none by default. You can use:

[contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}

To make it work.

In Safari, despite also being WebKit based, there is differing behavior when clicking on an element that has the user-select property set. Chrome seems to key-off that css property and prevent any focus going to the element that was clicked (thanks for continuing to develop a modern and sensible browser Google), while Safari does nothing with that css property regarding focus, and sets focus on the clicked element anyway.

One solution in Safari is to use a proper html button element, but this sucks from a styling perspective.

A better solution is to trap the mousedown event (the first to fire of the Mouse type events in a click), and preventDefault() on the event. This should work in any version of Safari.

For example

<span onclick="document.execCommand('bold', false);" onmousedown="event.preventDefault();">
  <i class="material-icons">format_bold</i>
</span>