如何解决显示文本完全合理的Safari问题？

Question

我的MacOS / iOS操作系统的Safari浏览器上出现文本显示问题。在选择/取消选择文本之前，文本显示不正确。

与浏览器进行任何交互之前的文本：

在选择期间：

选择“更正”文本后：

页面加载后，其他浏览器和操作系统会正确显示。

使用BrowserStack，我测试了多个版本的Safari。直到我测试了Safari 6.2，它才能正确显示。

我不确定是什么原因或解决方案是什么。

该网页是Angular 5 SPA。

Link to Animated GIF

.newline-to-br {
    white-space: pre-line;
}

<p _ngcontent-c27="" class="newline-to-br">Kids under 10 free. 
If fishing during hunting season, we would recommend wearing blaze orange for safety purposes. </p>

Answer 1

在Safari中，文本块的末尾不能有空格。实际上会添加空格，但是选择内容可以超过最后一个空格，这就是为什么它包装和对齐的原因。单击或突出显示文本会触发重绘，从而重新解释空间并正确对齐。要解决此问题，请删除</p>之前的最后一个空格。

<p _ngcontent-c27="" class="newline-to-br">Kids under 10 free. 
If fishing during hunting season, we would recommend wearing blaze orange for safety purposes.</p>