Buefy / Bulma: contenteditable div вылетает в Safari

Когда вы создаете div contentEditable, включаете таблицу стилей Buefy / Bulma, открываете веб-страницу в Safari, помещаете курсор в редактируемый div и пытаетесь ввести текст, Safari зависает.

HTML, вызывающий ошибку:

<div contentEditable="true"></div>

Я использую Safari v13.0.3 и Buefy v0.8.8.


buefy bulma contenteditable
person Martin Omander    schedule 13.12.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Оказывается, это ошибка в WebKit: https://bugs.webkit.org/show_bug.cgi?id=202262

При использовании contenteditable div, когда для рендеринга текста установлено значение optimizeLegibility, а семейство шрифтов включает -apple-system, возникает ошибка. Эта комбинация визуализации текста и семейства шрифтов используется Buefy / Bulma. Из таблицы стилей:

html {
  background-color: white;
  font-size: 16px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  min-width: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
  text-rendering: optimizeLegibility;
  text-size-adjust: 100%;
}

...

body,
button,
input,
select,
textarea {
  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

Исправление состоит в том, чтобы переопределить семейство шрифтов для редактируемого div. Я включаю шрифты из таблицы стилей Bulma, кроме -apple-system, и Safari не дает сбоев:

<div contentEditable="true"
  style="font-family: BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;"></div>
person Martin Omander    schedule 13.12.2019