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中,缩放切换在此更改后正常工作.

CSS:"transform:scale();"的错误位置 容器儿童