我花了一整天的时间才找到解决问题的方法,我只是想知道为什么这里没有更常见的讨论。我面临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版本。