css scale 在这个 div 上工作很奇怪

Question

在某些情况下，我让 jquery 添加一个类来缩放 div:

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

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; } 

它的尺寸翻了一番，但 div 的内容向上移动到浏览器的顶部之外，因此大约前三分之一被隐藏了，您无法向上滚动。

我将#wrapper 中的每个样式一个一个地删除，直到一个都不剩。除了搞砸布局外，在进行缩放时也会发生同样的事情。

为了消除我的任何 jquery 导致它的可能性，我编写了代码

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

在显示'stop2'之前出现显示问题。

还有什么可能导致这种情况？

干杯

Answer 1

Demo

你需要添加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 */
}