在不同长度单位下，Firefox中 tan(atan2(x, y)) 的变通方法是什么？

前端开发 2026-07-11

我有一个相当复杂的三角函数需要动态计算。我正打算用CSS实现，但它需要把CQW单位的值与CQH单位的值做商，放在一个 <div> 中，而这个变量可能会毫无征兆地改变大小。

不幸的是，Firefox不支持这样的商（在Chromium中工作正常，按预期返回一个无单位的数值）。

因此我正在使用 tan(atan2(y, x) 来计算商，并把结果存储在一个CSS变量中。这似乎只在 x 与 y 具有相同单位时才起作用——当它们都是长度，但单位不同的时候就会失败。

例如，下面这样就能按我预期计算出1.5：

--k: tan(atan2(3px, 2px));

这样也能得到同样的结果：

--k: tan(atan2(3, 2));

但这只是给我返回0：

--k: tan(atan2(1cqw, 1cqh));

甚至使用任何带有不同长度单位的变体也都会是一样。

我找到的文档说 atan2() 应该在不同单位下正常工作（前提是它们都是长度单位），但实际似乎并非如此。

有谁知道可行的变通方法，或指出我哪里做错了吗？（这是在Linux上的Firefox 148.0.2。）

解决方案

问题出在Firefox。关于 tan(atan2(...)) 在Firefox中存在一个已知的互操作性错误，Bugzilla甚至记录了一个变通方法，因为 tan(atan2(var(--foo), 1px)) 在那里可能表现异常。

请改用下面的模式：

.box {
  --w: 100cqw;
  --h: 100cqh;

  /* Convert each length to a unitless number first */
  --wn: calc(10000 * tan(atan2(var(--w), 10000px)));
  --hn: calc(10000 * tan(atan2(var(--h), 10000px)));

  /* Now divide number by number */
  --k: calc(var(--wn) / var(--hn));
}

JavaScript