CODEWITHSUNDEEP
csstransformcss-transforms
Basj
Basj

Reputation: 46401

Approaching the limit of CSS transform scale

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)

Upvotes: 15

Views: 6711

Answers (3)

Donald Duck
Donald Duck

Reputation: 8882

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.

Upvotes: 0

Kaiido
Kaiido

Reputation: 136637

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…

Upvotes: 1

jbutler483
jbutler483

Reputation: 24539

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

Upvotes: 0

Related Questions