CSS calc()在Firefox浏览器中乘法运算结果不符合预期问题排查

问题原因 #

这个是Firefox长期存在的CSS calc浮点精度处理的已知问题，核心原因如下：

• 你通过*1000放大计算值来剔除小数的操作，会让中间计算过程的浮点误差被大幅累积。虽然你直接读取--z4时，Firefox做了显示层面的舍入，对外展示为1px，但内部实际存储的计算值是略小于1px的浮点数（比如0.999999999px）。
• 当你后续执行calc(var(--z4) * 1082)的乘法运算时，Firefox不会对--z4的原始浮点值做舍入，直接用小于1的数值参与计算，再结合Firefox对极小长度值的自动截断规则，最终得到了0px的异常结果。Chrome对这类calc边界值会默认做最近整数舍入，所以表现符合预期。
• 加法运算正常的原因是Firefox对同单位的加法运算会触发舍入逻辑，纯数字乘长度单位的运算不会触发对应逻辑，直接使用原始浮点值计算。

解决方案 #

方案1：使用原生round函数（推荐） #

目前Firefox 117及以上版本已支持CSS round() 函数，可直接替代你用放大1000倍实现的取整逻辑，从根源避免精度误差累积：

--z: calc(1082px - 100%);
--z1: round(var(--z)); /* 直接取整，无需放大1000倍 */
--z2: calc(max(var(--z1) * (-1), var(--z1)));
--z3: calc((var(--z2) + var(--z1)) / 2);
--z4: calc(min(var(--z3), 1px));
width: calc(var(--z4) * 1082);

方案2：添加极小偏移量兼容旧版Firefox #

如果需要兼容117以下版本的Firefox，可以在--z4的计算末尾添加一个不会影响业务逻辑的极小偏移量，抵消浮点误差：

--z4: calc(min(var(--z3), 1px) + 0.0001px);

这个极小的偏移会把略小于1px的浮点值抬到1px以上，后续乘法运算就会正常返回预期结果。

方案3：运算前先做单位转换 #

也可以在最后计算宽度时，先把带单位的--z4转成无单位的数值，触发Firefox的舍入逻辑后再参与计算：

width: calc(var(--z4) / 1px * 1082px);

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