css - 为什么“字体大小：calc(1em + 1vw)”在 Safari 上不起作用？（但我的解决方法是）

Question

我花了一整天的时间才找到解决问题的方法，我只是想知道为什么这里不经常讨论它。我面临 Safari 13.1.1 的问题。当尝试调整浏览器窗口的大小时。它只是不会动态调整（基于计算的视点宽度）字体大小，因为它应该：

html {
font-size: calc(1em + 1vw);  /* not working when resizing */
}

我的解决方法工作正常：

html {
font-size: 1vw;  /* initialise first without calc() */
}

body {
font-size: calc(1em + 16px);  /* now working fine when resizing */
}

如您所见，您需要首先在没有 calc() 的情况下初始化视点宽度。需要在px中添加默认的font-size。现在它工作正常，并且在调整窗口大小时文本会调整大小。

我的问题：为什么会出现这种奇怪的行为？有什么解释吗？还是只是一个错误？

score 0 · Accepted Answer

这似乎最近在 WebKit 中得到修复，请参阅
https://bugs.webkit.org/show_bug.cgi?id=224614

不知道这将是什么 Safari 版本。

score 0 · Accepted Answer

Sara Soueidan最近发布了有关此问题的帖子，其中包括 Martin Auswöger建议的替代修复-webkit-marquee-increment: 0vw;，该修复仅在 Safari 中受支持。

score 0 · Accepted Answer

它看起来像一个没有解决的旧错误。我目前在页面中只有一些 calc() 有这个错误，不知道为什么。我使用的是较旧的 macOS 10.11 和 Safari 11.2，但由于您使用的是版本 13，如果这确实是相同的错误，那么它并没有完全修复。我使用的解决方法是设置最小高度：

#site-title {
    font-size: calc(1rem + 4.5vw);
    min-height: 0vw;
    (...)
}

类似错误的参考：

3 回答 3