css scale works strangely on this div

Question

I have jquery adding a class to scale a div in certain circumstances:

$("#wrapper").addClass("doubleDiv");

The css:

.doubleDiv{ transform: scale(2); }

#wrapper { height:100%; position:relative; z-index:2; background-color:#111;  max-width:320px; min-height:480px; margin:0px auto; } 

It doubles the size fine, but the div's content gets shifted up past the top of the browser, so that roughly the top third is hidden, and you cannot scroll further up.

I removed each of the styles in #wrapper one by one, until none were left. Apart from screwing up the layout, the same thing happens when the scale is carried out.

To eliminate the chance of any of my jquery causing it, I coded

    alert('stop1');
    $("#wrapper").addClass("doubleDiv");
    alert('stop2');

The display problem occurs before 'stop2' is displayed.

What else could cause this?

Cheers

Answer 1

Demo

you need to add transform-origin

css

.doubleDiv {
    transform: scale(2);
    transform-origin:50% 0%;
    -ms-transform-origin:50% 0%;/* IE 9 */
    -webkit-transform-origin:50% 0%; /* Chrome, Safari, Opera */
}