CSS: "transform: scale();"容器子项的错误位置

Question

我有一个包含长内容的容器元素，该元素已缩放:

.container {
  transform: scale(0.9);
}

在这个容器中，我有一个子 div，它曾经是一个弹出窗口。它绝对定位在前 50%

.popup {
  width: 300px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
}

但不幸的是，当容器缩放时，这个 50% 不起作用。如果它出现在页面底部，我需要使用 ~240%。

你现在有一些关于在缩放元素的子元素上应用定位的细节吗？

演示: http://labs.voronianski.com/test/scaled-positioning.html

Answer 1

添加到.wrap:

.wrap {
  ...
  position: relative;
  /*some prefix*/-transform-origin: 0 0;
}

您需要重新定位 .popup(现在引用框架是 .wrap，而不是 html 元素)，但在 Chrome 中，缩放切换在此更改后工作正常。

参见:When using CSS Scale in Firefox, element keeps original position