CSS: неправильная позиция "transform: scale()"; контейнерные дети

У меня есть контейнерный элемент с длинным контентом, который масштабируется:

.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