CSS3转换:转换最大值? [英] CSS3 transform: translate maximum value?

问题描述

我创建了一个实验，

此演示在Chrome上有效，直到大约3,300万次 transform:translate(0px，3.35545e + 07px);

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

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

任何CSS专家都知道 transform的局限性:translate ?

更新:仅供参考，使用 position:absolute 时，我看到的问题大约为3300万.

解决方案

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

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

I created an experiment to infinite-scroll the first billion digits of Pi to find/create a scrolling solution that has high-performance with a massive dataset. I started testing with iScroll and ran into an issue.

This demo works great (in Chrome) till around 33 million transform: translate(0px, 3.35545e+07px);

You can see the issue by running the following commands in the dev tools console, then scrolling.

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

Any CSS experts know the limits of transform: translate?

Update: FYI, I see the same issue at ~33 million when using position: absolute.

解决方案

For firefox, the maximum scale() multiplier is equal to the maximum browser CSS height/width / element height/width. If your calculated element's height/width exceeds this limit, then your element won't be scaled anymore.

Some people say , In chrome the maximum scale() multiplier/divider seems to be 10000

这篇关于CSS3转换:转换最大值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！