Buefy / Bulma:可满足的div崩溃Safari

Question

当您创建Safari时，包含Buefy/Bulma样式表，在contentEditable中打开网页，将光标放在可编辑的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

使用可内容编辑的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的font-family。我包含了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>