CSS scaling and centering a page

Question

Why does this work in Firefox , but not in Chrome :

position:absolute; 
overflow: hidden; 
margin:0; 
padding:0; 
transform: translate(240px,79.5px) scale(1.2484375);

In translate(x,y) and scale(value), x,y, and value are different for different computers/browsers.

it works for Firefox, but Chrome, does not get scaled or translated .

demo: ** http://jsfiddle.net/SergioAntonio/kp9yr4m1/

**

its seems like I found a solution: I changed the JavaScript code from: document.body.style="transform: translate(240px,79.5px) scale(1.2484375)";

to

document.body.style.transform="translate(240px,79.5px) scale(1.2484375)";

and now it works in chrome.

Answer 1

Have you tried vendor-prefixing it properly?

-webkit-transform: translate(240px,79.5px) scale(1.2484375);

Chrome started natively offering support for transform only in Version 36. For older versions, also for most Android browsers, you will still have to prefix it.

Answer 2

Use like this

.example {
  -webkit-transform: translate(240px,79.5px) scale(1.2484375);
      -ms-transform: translate(240px,79.5px) scale(1.2484375);
          transform: translate(240px,79.5px) scale(1.2484375);
}