contenteditable - Buefy / Bulma：contenteditable div 使 Safari 崩溃

Question

当您创建一个 contentEditable div 时，包括 Buefy/Bulma 样式表，在 Safari 中打开网页，将光标放在可编辑 div 中，然后尝试输入文本，Safari 就会冻结。

触发错误的 HTML：

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

我正在使用 Safari v13.0.3 和 Buefy v0.8.8。

Answer 1

原来这是 WebKit 中的一个错误：https ://bugs.webkit.org/show_bug.cgi?id=202262

使用 contenteditable div，当 text-rendering 设置为optimizeLegibility并且 font-family includes-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>