为什么"font-size: calc(1em + 1vw)"不能在 Safari 上工作?(但我的解决方法确实如此)



我花了一整天的时间才找到解决问题的方法,我只是想知道为什么这里没有更常见的讨论。我面临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为单位添加。现在它工作得很好,当调整窗口大小时,文本的大小也会随之调整。

我的问题是:为什么会有这种奇怪的行为?有什么解释吗?还是只是一个虫子?

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

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

类似错误的参考:

  • 字体大小计算动态大小Safari失败
  • 为什么calc在用于字体大小时不进行重新评估
  • https://css-tricks.com/viewport-sized-typography/
  • https://bugs.chromium.org/p/chromium/issues/detail?id=124331

Sara Soueidan最近发布了这方面的消息,并包含了Martin Auswöger建议的使用-webkit-marquee-increment: 0vw;的替代修复程序,该修复程序仅在Safari中受支持。

https://www.sarasoueidan.com/blog/safari-fluid-typography-bug-fix/

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

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

相关内容

最新更新