36

I am trying to scale my entire page from the top left. This is what my original page looks like:

enter image description here

However when I try to scale my page, this happens:

enter image description here

This is my CSS:

html {
    zoom: 1.4; /* Old IE only */
    -moz-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
    transform-origin: top left;
}

What am I doing wrong? It cuts off part of my page.

2339870
  • 1,317
  • 3
  • 15
  • 23

4 Answers4

52

I was able to "solve" my problem.

This is what I tried:

  • In the CSS shown in the question, I changed html to body:

    body {
    zoom: 1.4; /* Old IE only */
    -moz-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
    transform-origin: top center;
    margin-top: 5px;
}

  • I changed transform-origin: top left to transform-origin: top center.

  • I also changed the CSS of my container div so that it is centered.

This fixed the problem partly as it centered to page nicely.

However, part of the top page still isn't displayed correctly. To fix this I added a margin-top to my body.

random_user_name
  • 25,694
  • 7
  • 76
  • 115
2339870
  • 1,317
  • 3
  • 15
  • 23
30

I know this question is 3 years old but I just stumbled on it. The reason your transform is not positioned correctly is because your transform-origin parameters are backwards and thus are ignored. It's "transform-origin: x-axis y-axis" so you should have "transform-origin: left top", not "transform-origin: top left".

kbriggs
  • 1,267
  • 1
  • 12
  • 16
  • 3
    I always had trouble myself remembering which was X and which was Y. A teacher gave me a _mnemonic device_ that helped me: **X to the left, Y to the sky**. It's pretty standard, if not technically-standard that anything that wants orientation or coordinates will want it in `X,Y` format. – Regular Jo Oct 21 '17 at 17:55
0
 zoom: 1.4; 
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);

Scaling is cutting off your content. Reduce scaling to 0.4, it's rendering properly.

zoom: 0.4; 
-moz-transform: scale(0.4);
-webkit-transform: scale(0.4);
mohamedrias
  • 18,326
  • 2
  • 38
  • 47
0

for some reason, my browser seems to ignore transform-origin for particular elements such as iframe, therefore, in order to transform by left top, I wrote them all in transform property;

transform: scale(0.5) translate(-50%, -50%);
Weilory
  • 2,621
  • 19
  • 35