Safari CSS仅在单击以进行文本对齐后更新：对齐（以沙盒示例为例）

Question

编辑：简而言之，我制作了一个代码沙箱：

  

https://codesandbox.io/s/928m541rny?fontsize=14

在Mac的 Safari 中打开，如果您稍微拉开窗口，就会看到以下内容：

如果您单击文本，则可以正确对齐。

---

我在Safari for mac（12.0.3）上有一个非常有趣的错误，该文本在第一次渲染时没有正确地对齐（屏幕截图1），只有在单击它后才正确地对齐（屏幕截图2）。

我将React与Material-UI结合使用，并直接在theme.js文件中覆盖我的body2的所有样式，如下所示：

body2: {
        textAlign: "justify"
      }

此实现可在Chrome上正常运行。该字符串来自我的后端，该后端从Google Firestore检索它。新行用\n字符表示。我正在寻找解决此问题的方法，但没有找到解决方法（将\n字符替换为<br /> html标签）

我尝试过的事情：

• 在Safari上搜索与text-align: justify相关的问题
• 尝试使用text-justify属性

我实际上不知道该去哪里解决这个问题，也从来没有这样的错误（单击后更改CSS，而未实现任何onClick逻辑。）这就是为什么我列出这么多标签的原因，因为目前我还没有真正的想法。

单击它后，它可以正确显示：

其他信息：

          <Typography paragraph>
              {description}
          </Typography>

我也像这样覆盖根字体（如果不这样，则不会显示来自firestore字符串的新行）：

    MuiTypography: {
      root: {
        whiteSpace: "pre-line"
      },
      body2: {
        fontSize: 15,
        textAlign: "justify"
      }
    },