接近 CSS 变换比例的极限

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

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

硬件加速/图形加速会在您的页面显示方式中发挥重要的作用，因此您可能需要将其纳入您的“页面”。

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

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

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

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

但实际上，你需要这种能力吗？你不能使用不同的方法吗？ （例如，如果您使用这个想法来“生成背景效果”，您可以不使用 svg/pseudo effects/etc 吗？）。

---

总之，我不认为这是一个错误，但我认为这将是一种查看“谁拥有更好的硬件加速”/“图形能力”与他们的浏览器/PC 组合的方式。

进一步阅读

• unleash the power of Hardware-Accelerated HTML5 Canvas
• How to enable or disable software rendering in Internet Explorer
• GPU Accelerated Compositing in Chrome

Answer 2

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

火狐

#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 3

我认为transform:scale(...) 没有任何限制。在最新版本的 Chrome 上，我达到了 10 000 000 没有问题。但是，如果您有一个非常小的文本并用它变大，那么您的问题可能不是transform:scale(...)。 font-size:...的小有一个限制，不能小于0.01px。如果您没有这么小的文字，我不明白您为什么要对transform:scale(...) 设置如此高的价值，因为文字太大，任何人都无法阅读。