接近CSS变换规模的极限

对于我的项目 areallybigpage.com(*),我试图看到我们可以使用CSS’transform：scale(…)可以有多远.

这样可以正常显示文本：

#id1 { position: absolute; transform-origin: 0 0; transform: scale(10000); }
#id2 { position: absolute; transform-origin: 0 0; transform: scale(0.0001);}

<div id="id2"><div id="id1">Bonjour</div></div>

但这似乎太多了,不再显示任何东西(测试Firefox 32.0 / Win7,笔记本电脑/几个硬件加速)：

#id1 { position: absolute; transform-origin: 0 0; transform: scale(100000); }
#id2 { position: absolute; transform-origin: 0 0; transform: scale(0.00001);}

<div id="id2"><div id="id1">Bonjour</div></div>

CSS3变换有规模限制：scale(…)？

我们如何进一步推动这个限制？

(*)：我目前不使用transform：scale(…)在这个页面上,因为这个问题描述的限制,但我想在此网站的未来版本中使用它.

偏离主题：如果您使用PgUp放大足够的距离,您可以轻松获得1.79e 308浮点限制问题. (但这是另一个问题)

解决方法

其实似乎在你的测试中,至少对于firefox *,CSS px的最大高度是一个问题.
*(在chrome中,最大scale()乘数/除数似乎是10000)

如果您添加具有固定位置的第三个div,并且将div设置为此最大CSSpx,您可以看到乘数/除数越高,内部div越小：

s=150000;
document.getElementById('p').addEventListener('click',function(){
    s*=1.1; doit();},false);
document.getElementById('m').addEventListener('click',function(){
    s/=1.1; doit();},false);

function doit(){
    document.getElementById('id2').style.transform = 'scale('+1/s+')';
		document.getElementById('id1').style.transform = 'scale('+s+')';
  document.getElementById('r').innerHTML = s;
  }

#id1 {  transform-origin: 0 0; transform: scale(1); width:17895697px; height: 17895697px; background:#AA00AA;}
#id2 {transform-origin: 0 0; transform: scale(1); width: 17895697px; height: 17895697px; background:#00AA00; }
#id3 { position: absolute; height: 100%; width: 100%;background:#AFAFAF;}
#p {position: fixed; top: 3em;}
#m {position: fixed; top: 3em; left: 3em;}
#r {position: fixed; top: 4em;}

<div id="id3"><div id="id2"><div id="id1">Bonjour</div></div></div>
<button id="p">+</button><button id="m">-</button><p id="r"></p>

查看此答案了解更多详情：https://stackoverflow.com/a/24748165/3702797.

如果我们以另一种方式(容器倍增,然后包含分割)来测试用例,我可以在FF中乘以10000的乘数,并在FF中输入64424503296.0000038 …

铬

#id1 { transform: scale(10000);  width: 33554428px; height: 33554428px; background: #AA00AA; }
#id2 { transform: scale(0.0001); width: 33554428px; height: 33554428px; background: #00AA00; }

火狐

#id1 {  transform: scale(10000);  width: 17895697px; height: 17895697px; background:#AA00AA; }
#id2 {  transform: scale(0.0001); width: 17895697px; height: 17895697px; background:#00AA00; }

Chrome Fiddle Firefox fiddle

编辑

这意味着对于firefox来说,最大scale()乘数等于最大浏览器CSS height / width / element height / width.如果您计算的元素的高度/宽度超过此限制,则您的元素将不再缩放.

r.textContent = document.getElementById('id2').getBoundingClientRect().width +" instead of 1px*20.000.000";

#id2 {
  transform: scale(2e+7);
  width: 1px;
  height: 1px;
  background: #00AA00;
}
#id3 {
  height: 100%;
  width: 100%;
  background: #AFAFAF;
}
#r {
   position: fixed;
}

<div id="id3">  <div id="id2"></div> </div>
<p id="r"></p>

Chrome似乎没有受到限制,但是…

原文链接：https://www.f2er.com/css/216837.html

接近CSS变换规模的极限

解决方法

猜你在找的CSS相关文章