CSS3变换：translate的最大值是多少？

Question

我创建了一个实验，无限滚动前十亿位的圆周率，以寻找/创建一种具有大规模数据集高性能的滚动解决方案。我开始使用iScroll进行测试，并遇到了问题。

这个演示在Chrome中非常好用，直到大约3300万次transform: translate(0px, 3.35545e+07px);

您可以通过在开发工具控制台中运行以下命令，然后滚动来查看问题。

scroller.scrollTo(0, -33553700); scroller._execEvent('scroll');

有没有CSS专家知道transform: translate的限制？

更新：值得注意的是，当使用position: absolute时，我在大约3300万处看到了相同的问题。

- SavoryBytes

---

似乎与33554432的25位值非常接近。 - Firsh - justifiedgrid.com

Answer 1

对于 Firefox，最大的 scale() 倍数等于浏览器 CSS 高度/宽度或元素高度/宽度的最大值。如果计算出的元素高度/宽度超过了这个限制，那么你的元素就不会再被缩放。

有些人说，在 Chrome 中，最大的 scale() 倍数/除数似乎是 10000。

- Shuvo Habib

---

有趣的是，只是为了明确，我不是要扩展任何内容，只是要翻译元素的位置（以便我可以顺利地回收它们）。FYI，当使用“position: absolute”时，我在3300万处看到了同样的问题。 - SavoryBytes

超过10,000的数字在内联Chrome样式中表示为指数形式，因此如果您执行类似于parseInt(transform.split('(')[1])的操作，则转换值将“神奇地”回到1（10,000是1e + 4）。 如果是这种情况，您应该改用parseFloat。 - Adam Jagosz