Safari 14中min()/max()/clamp()结合vw与px值无法正常工作

这确实是Safari 14的已知渲染bug——它对基于视窗单位（如vw）的动态字体大小计算存在惰性，只有在页面首次加载或刷新时才会计算一次，窗口缩放过程中不会实时重计算样式值。

无需JavaScript的修复方案 #

最可靠的无JS解决办法是强制Safari在窗口 resize 时触发重绘，具体可以通过给目标容器添加一个不影响视觉效果的transform样式：

.hero {
  font-size: clamp(4px, 1vw, 10px);
  /* 强制Safari重绘，触发视窗单位样式重计算 */
  transform: scale(1);
}

如果你之前用的是max()/min()等效写法，同样可以加上这个transform属性来修复：

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

这个技巧的原理是：transform: scale(1)本身不会改变元素的视觉大小，但会触发浏览器的重绘流程，迫使Safari重新计算所有依赖视窗单位的样式属性，包括你的字体大小。

额外说明 #

这个bug在Safari 15及后续版本已经被官方修复，所以如果你的用户群体可以升级Safari，升级浏览器也是一劳永逸的解决方式。但如果需要兼容Safari 14，上面的CSS技巧是目前最简便的无JS方案。

内容的提问来源于stack exchange，提问作者RivasCVA