CSS3变换：翻译最大值？

Posted 2023-03-05

【中文标题】CSS3变换：翻译最大值？

【英文标题】：CSS3 transform: translate maximum value?

【发布时间】：2016-09-16 17:49:43

【问题描述】：

我为infinite-scroll the first billion digits of Pi 创建了一个实验，以查找/创建一个具有海量数据集的高性能滚动解决方案。我开始使用iScroll 进行测试并遇到了问题。

这个演示（在 Chrome 中）运行良好，直到大约 3300 万transform: translate(0px, 3.35545e+07px);

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

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

任何 CSS 专家都知道transform: translate 的限制吗？

更新：仅供参考，我在使用 position: absolute 时看到了大约 3300 万个同样的问题。

【问题讨论】：

奇怪地接近 33554432 的 25 位值

【参考方案1】：

对于 Firefox，最大 scale() 乘数等于最大浏览器 CSS 高度/宽度/元素高度/宽度。如果您计算的元素的高度/宽度超过此限制，则您的元素将不再缩放。

有人说，在 chrome 中，最大 scale() 乘数/除数似乎是 10000

【讨论】：

有趣，但请注意，我不想缩放任何内容，只是平移元素的位置（这样我就可以顺利地回收它们）。仅供参考，我在使用 position: absolute 时看到了 3300 万个同样的问题。

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