Стиль потери текста (даже если css показывает, что он должен иметь его), но не в том случае, если код пропускается через консоль (включая jsfiddles)

Question

(я только подтвердил, что это произошло до сих пор с Safari 12.1.2 на MacOS Mojave)

Итак, у меня есть спорный div со стилизованным промежутком (красным) и некоторым текстом внутри него. Ничего странного пока нет.

Однако, когда я делаю некоторые операции над текстом (сохраняя весь текст по-прежнему в одном и том же стилизованном интервале ), часть текста теряет свой стиль даже при проверке DOM показывает, что он должен быть в стиле (красный).

Вот jsfiddle, иллюстрирующий проблему выше:

1: https://jsfiddle.net/tx71pqmv/5/

$('#editable').keypress((event) => {
    if (event.key != 'Enter' || !event.shiftKey)
        return;
    event.preventDefault()
    let sel = window.getSelection()
    let range = sel.getRangeAt(0)
    let newLine = $('<span>')
        .addClass('br')
        .attr('contenteditable', 'false')[0]
    range.startContainer.splitText(range.startOffset) // 1
    range.insertNode(newLine) // 2
})

Странно то, что эта проблема возникает при ОЧЕНЬ определенных условиях c.

Например, если я пошагово выполняю код с помощью отладчика или использую setTimeout, чтобы отложить выполнение даже на 1 мс ( см. Jsfiddle # 2 ), тогда все работает как положено.

Или, даже просто избавившись от псевдоэлемента :: before на содержащем div (даже не стилизованном span), это решает проблему ( см. Jsfiddle # 3 ). Это должно быть совершенно не связано!

Есть ли более чистое решение проблемы, которое не предполагает компрометацию css или использование setTimeout?

Редактирование: добавление скриншотов структуры DOM после нажав shift + enter на первом jsfiddle, а на втором. Структура DOM на обоих выглядит одинаково, но на правую модель не накладывается стиль для одного из текстовых узлов:

Answer 1

Здесь shift+Enter и Enter ведут себя по-разному для #editable div

• Enter создает нового потомка (div) из #editable div означает, что у вас есть больше child каждый раз, когда вы нажимаете shift, вводите
• , но Shift + Enter создает новую строку в браузерах child div > span

, которые ведут себя по-разному для contenteditables

как MDN говорит

Use of contenteditable across different browsers has been painful for a long time because of the differences in generated markup between browsers.

Прочитайте это для получения дополнительной информации: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content

новый div, созданный с использованием enter

enter">