字体大小计算动态大小Safari失败答案

【问题标题】：Font-size calc dynamic size Safari failing字体大小计算动态大小Safari失败
【发布时间】：2016-09-01 10:15:47
【问题描述】：

我使用 PostCSS responsive-type 插件，我得到的生成代码如下：

h1 {
 font-size: calc(28px + 20 * ((100vw - 320px) / 880));
}

http://codepen.io/umbriel/pen/WwLBxQ

在 Firefox、Chrome 和可能的其他现代浏览器中运行良好。但是 safari Version 9.0.3 完全失败，正如我链接的 Codepen 所证明的那样。

有人知道为什么会这样吗？

编辑：我可能找到了罪魁祸首，似乎 vw 与 calc 结合是我尝试过的问题。有没有办法让它发挥作用？

【问题讨论】：

表达式的哪些部分失败了？您可以使用简化值来检查它是否是 calc 函数、vw、嵌套括号等。
在你的css字体大小中使用-webkit-前缀：-webkit-calc(28px + 20 * ((100vw - 320px) / 880));
Why doesn't the CSS calc() function work for me? 或 CSS calc not working in Safari and fallback 的可能重复
@farshid -webkit 前缀无法被 Chrome 或 Safari 浏览器识别
@MrLister 我认为它的 vw 和 calc 是我尝试过的问题

标签： html css sass postcss

【解决方案1】：

似乎已在此处修复此问题：
https://bugs.webkit.org/show_bug.cgi?id=224614

应该在 Safari 的未来版本中。

【讨论】：

【解决方案2】：

Safari 13.1.1 在调整大小时似乎再次遇到了动态字体大小（基于计算的视口宽度）的问题。所以这行不通：

html {
font-size: calc(1em + 1vw)
}

我刚刚找到的解决方法：

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

body {
font-size: calc(1em + 16px); /* 1vw = 1em here and 16px is the default browser value */ 
}

【讨论】：

【解决方案3】：

如果有人在 2020 年看到这个并感到有点失落，因为 Safari 仍然表现得很时髦（尤其是在处理动态字体大小时），看看这个codepen

这不是我的，但它通过使用

为我解决了问题

min-height: 0vw;

关于“文本类”。我最终将它用作全局，因此我不需要在任何我想使用它的地方都引入课程。

希望对您有所帮助。

【讨论】：

非常感谢，真的花了我很长时间才弄清楚发生了什么......
知道为什么要修复它吗？
@malte 据我了解，Safari 需要一个参考点来缩放旧版本中的元素。它似乎固定在当前的一个。如果没有设置高度，他们有点“锁定”这些值并拒绝更新它们。 Safari 中的图像也是如此。如果你没有设置宽度（即使只是自动），Safari 对它们的处理方式与其他浏览器不同（挤压它们等）
仅供参考 Sara Soueidan 最近发布了有关此问题的信息，并包含使用 -webkit-marquee-increment: 0vw; 的替代修复，该修复仅在 Safari 中受支持。 sarasoueidan.com/blog/safari-fluid-typography-bug-fix

【解决方案4】：

我在 Safari 10.0.1 中尝试组合 vw 和 px 单位时遇到了同样的问题。

使用% 字体大小值而不是px 为我解决了这个问题。我假设基本字体大小为 16px。

html {
  font-size: 16px;
}

h1 {
  font-size: calc(175% + 20 * ((100vw - 320px) / 880));
}

&lt;h1&gt;Responsive title in Safari 10&lt;/h1&gt;

【讨论】：

【解决方案5】：

calc 或 vh/vw in calc 在 Safari 和 android 浏览器中可能存在问题。这是一个已知问题，已在 Safari 7+ 中修复，但报告的问题仍然很少。

-webkit-calc 可以用作备用，它在 Safari 中运行良好。

Safari 修复示例：

sometag{
    width: 48%;
    width: -webkit-calc(50% - 20px);
    width: -moz-calc(50% - 20px);
    width: calc(50% - 20px);
}

来源：SO question : Why doesn't the CSS calc() function work for me?

另一个旧修复供您参考：using jQuery()

参考：

【讨论】：

Calc 在 Safari 中运行良好，它的 Calc 与 VW 配对很麻烦
是的，-webkit-calc 可以修复它，如果它是旧的 Safari，那么 jQuery 解决方案将是最好的。

【解决方案6】：

我解决这个问题的方法是引入纯 CSS 后备，不支持 CSS calc 的旧浏览器只能读取。

h1 {
 font-size: calc(28px + 20 * ((100vw - 320px) / 880));
 font-size: -webkit-calc(28px + 20 * ((100vw - 320px) / 880));
 font-size: -moz-calc(28px + 20 * ((100vw - 320px) / 880));
}

【讨论】：

正如 cmets 中有人提到的那样——我相信 -webkit-calc 不会被 safari 6 及更高版本识别——我只想让它与最新的 Safari 9 一起工作