Safari：文字重叠并且不尊重容器边界

Question

我使用html5模板制作了一个我目前正在制作的简单网站。 Firefox和Chrome中的一切看起来都很棒，但在Safari（使用MacBook和iPad Pro测试）上，文本无法正确呈现。它不尊重容器宽度，有时单词或字母甚至重叠。只要我标记文本，它就会正确呈现。

知道这可能是什么意思吗？该模板使用谷歌网络字体并在css文件中导入它们。

Link to template demo用于问题的实时预览。

MacBook（iOS 11）上的问题

iPad Pro（iOS 11）

Answer 1

从我看到的内容有两点：从letter-spacing规则中禁用p时，它恢复正常。

但最重要的是，您的typography样式似乎是SCSS文件，并且未编译为CSS因此显示错误。

您可能希望将其编译为CSS并再试一次。 希望它能帮助

Answer 2

我在一个正在处理的网站上遇到了完全相同的问题，对于重叠的字符，我相信这是回车的问题，我从Invision中复制了文本内容，并发现它已创建这些问题。当我卸下笔架后，返回的文字清晰可读，但是仍然有文字重叠的问题，就像您一样，我觉得这是webkit浏览器中字母间距错误，因为我在上面有同样的问题新的ipad（有趣的是，我坐在周围的旧ipad 2可以完美显示）。