Question

对于我的项目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 transform: scale(...)是否存在缩放比例？

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

（*）：我目前在此页面上不使用 transform: scale(...)，因为此问题中描述的限制，但我想在该网站的未来版本。

偏离主题：如果使用 PgUp 缩放得足够远，则可以轻松达到1.79e+308浮点限制问题。（但这是另一个问题）

Answer 1

实际上，在您的测试中，似乎至少对于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。

如果我们以另一种方式获取测试用例（容器乘以然后包含除法），我可以在chrome中使用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; }

Firefox

#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()乘数等于maximum browser 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似乎没有受到限制......

Answer 2

我不认为这是浏览器的问题，而是与您正在运行它的PC有关。

硬件加速/图形加速会在页面显示方式中扮演大部分，因此您可能需要将其纳入“页面”。

你们中的许多人可能已经知道了这一点，但对于其他人，这里有一个你可能会觉得有用的快速提示。

快速提示：如果您使用的是Chrome或Chromium浏览器，并且您的图形卡已禁用硬件加速，则可以尝试   强制它获得更好的视频播放性能（例如   YouTube）以及对3D地球视图等功能的支持   新的Google地图。

要检查Chrome / Chromium浏览器是否使用硬件加速，   打开一个新标签，键入："chrome://gpu"（不带引号）并查看   在“图形功能状态”下 - 所有（或至少大部分）   功能应该说“硬件加速”。 see more...

你的显卡在渲染/等速度方面也起着重要作用，所以我不会完全避免使用transform: scale(...) ，但会向任何访问者提及“为了获得最佳效果，允许硬件加速并确保您的图形驱动程序是最新的......”

但实际上，你需要这种能力吗？你能不能采用不同的方法？（例如，如果你使用这个想法'产生背景效果'，你可以不使用svg /伪效果/等吗？）。

总之，我不相信这是一个错误，但我认为这将是一种通过浏览器/电脑组合看到'谁拥有更好的硬件加速'/'图形能力'的方式。

进一步阅读

Answer 3

我不认为transform:scale(...)有任何限制。在最新版本的Chrome上，我没有遇到任何问题。但是如果您的文字非常小，那么您的问题可能不是transform:scale(...)。 font-size:...有多小，它可以小于0.01px。如果你没有这么小的文字，我就不明白为什么你希望transform:scale(...)有这么高的价值，这个文字太大了，任何人都无法阅读它

接近CSS变换规模的极限

3 个答案:

修改