Approaching the limit of CSS transform scale

Question

For my project areallybigpage.com (*), I'm trying to see how far we can with CSS' transform: scale(...).

This works and displays the text at normal size:

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

But this seems to be too much and doesn't display anything anymore (tested Firefox 32.0/Win7, laptop computer/few hardware acceleration):

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

Is there a limit of scale with CSS3 transform: scale(...) ?

How can we push this limit further?

---

(*) : I currently don't use transform: scale(...) on this page, because of the limitation described in this question, but I would like to use it in a future version of this website.

Off-topic: if you zoom far enough with PgUp, you easily get to the 1.79e+308 float limit problem. (but this is another problem)

Answer 1

Actually it seems that in your test, at least for firefox* the maximum height in CSS px is an issue.
*(In chrome the maximum scale() multiplier/divider seems to be 10000)

If you add a third div with a fixed position, and you set your divs to this maximum CSSpx you can see that the higher the multiplier/divider is, the smaller the inner divs are :

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>

Check this answer for more details : https://stackoverflow.com/a/24748165/3702797.

If we take the test case in the other way (container multiplies then contained divides), I can go to a multiplier of 10000 in chrome and 64424503296.0000038... in FF :

Chrome

#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

Edit

This does mean that 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.

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 doesn't seem to be limited in such a way however…