Safari 14 - min()、max()、clamp() 不适用于 vw 和 px 值

Question

我有一个容器，我想在其中设置其字体大小以反映在其子项上。

我正在使用以下内容来支持不同屏幕尺寸的字体大小：

.hero {
    font-size: clamp(4px, 1vw, 10px);
}

上面的 CSS 适用于 Google Chrome，但是当我运行我在 Safari（确切地说是 Safari 14）上的页面时，字体大小确实当我更改 window 的大小时不会调整大小。如果我调整 window 的大小然后刷新页面，字体会调整大小，但会保持初始字体大小。

我也试过运行将 clamp() 的 min() / max() 版本设置为 ...

.hero {
    font-size: max(4px, min(1vw, 10px));
}

但我仍然遇到完全相同的问题。字体大小未在 Safari 上调整大小。我尝试用合理的 pt 值替换 px，但问题仍然存在。我不确定这个问题是否出现在 Safari 13 上，但我最近更新到 Safari 14。

这是一个已知问题吗？我错过了什么吗？我怎样才能解决这个问题而不必使用任何 JavaScript?

Answer 1

显然，Safari 计算 clamp() 不正确...设置 min-height 属性就可以了。我已经更改了原始示例的值，因为它太小了，您看不到任何效果：

.hero {
  min-height: 0vw;
  font-size: clamp(16px, 10vw, 32px);
}

然后：

<h1 class="hero">Hero Text</h1>

这是一个JSFiddle

Safari 14 - min(), max(), clamp() not working with vw and px values