Safari 14-min，max，clamp无法与vw和px值一起使用

问题描述

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

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

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

上面的CSS可以在Google Chrome上正常工作，但是当我在Safari上运行页面时（确切地说是Safari 14），当我更改窗口大小时，字体大小不会重新调整。如果我调整窗口大小然后刷新页面，则字体会调整大小，但仍保持初始字体大小。

我也尝试过这样运行clip（）的min（）/ max（）版本...

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

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

这是一个已知问题吗？我想念什么吗？我该如何解决这个问题而不必使用任何JavaScript？

解决方法

找到了解决方案。显然，Safari会计算错误...设置mon-height属性可以完成这项工作。我已经更改了原始示例的值，因为它太小了，您看不到任何效果。

这里是JSFiddle

,

上面的 min-height 答案确实有效——但我也注意到，clamp() 函数本身确实可以正常工作，但只能在页面加载时正常工作。添加 min-height 允许它在窗口调整大小时流动，这显然是所需的结果，但只是发布我发现的内容:)

（我是新手，所以无法直接评论以上内容；）