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)

Screenshot on Firefox 32.0 / Win7 : http://gget.it/4n4lwoxq/3.jpg — Basj, Jan 06 '15 at 17:26
I see the problem on Chromium, but not on Firefox. Maybe it's because of the graphics, I have basic (OMTC) acceleration, but not GPU acceleration. — Oriol, Jan 06 '15 at 17:31
On my Chrome `39.0.2171.95 (64-bit) / MacOs 10.9.4` it seems that `9999` is the highest admittable value — Fabrizio Calderan, Jan 09 '15 at 11:42
I think it has to do with [maximum CSS px](https://wiki.mozilla.org/Mozilla2:Units#Proposal). — Kaiido, Jan 09 '15 at 13:04
I do not see these limits when using `scale3D` in Chrome. This might be because `scale3d` is hardware accelerated. They still seem to exist in Firefox and IE. See [fiddle](http://jsfiddle.net/54q4pfgh/) — quw, Jan 09 '15 at 15:19

score 1 · Answer 1 · edited May 23 '17 at 10:31

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…

Thanks @Kaiido for your answer. So this basically means that there is no *real solution* (that would work cross-browser) for going up to `scale(1000000);`? Do you have an idea on how to go further? — Basj, Jan 12 '15 at 15:31
This does mean that for firefox, the maximum scale() multiplier is equal to the `maximum browser CSS height/width` / `element height/width`. check update for an example with a 1px*1px element. For Chrome, it seems to be limited to `infinity` — Kaiido, Jan 12 '15 at 17:57

score 0 · Answer 2 · answered Jan 09 '15 at 12:07

I don't believe it to be an issue with browsers, but more to do with the PC you're running it on.

Hardware acceleration/graphics acceleration would play a big part in how your page is displayed, and so you may need to factor this into your 'page'.

Many of you probably already know about this but for the rest, here's a quick tip that you might find useful.

Quick tip: If you use Chrome or Chromium browsers and hardware acceleration is disabled for your graphics card, you can try to force it to get better video playback performance (for instance on YouTube) as well as support for features such as the 3D Earth view in the new Google Maps.

To check if your Chrome / Chromium browser uses hardware acceleration, open a new tab, type: "chrome://gpu" (without the quotes) and look under "Graphics Feature status" - all (or at least most of) the features should say "hardware accelerated". see more...

You graphics card also plays a huge role in speed of rendering/etc, and so I wouldn't completely steer clear of use of the transform: scale(...), but would mention to any visitors that 'for best results, allow hardware acceleration and ensure your graphics drivers are up-to-date...'

But realistically, do you need this ability? Could you not use a different approach? (i.e. if you were using this idea to 'generate a background effect', for example, could you not use svg/pseudo effects/etc?).

In conclusion, I don't believe this is a bug, but I think it would be a way of seeing 'who's got the better hardware acceleration'/'graphics ability' with their browser/pc combination.

Further Reading

score 0 · Answer 3 · answered Jan 15 '15 at 16:39

I don't think that there is any limit for transform:scale(...). On the latest version of Chrome, I got up to 10 000 000 with no problem. But your problem might not be transform:scale(...) if you have a very small text that you make bigger with it. There is a limit for how small font-size:..., it can't be smaller than 0.01px. If you don't have such a small text, I don't see why you would like to have such a high value for transform:scale(...), the text would be too big for anybody to be able to read it.

Approaching the limit of CSS transform scale

3 Answers3

Edit