CSS: Niepoprawna pozycja "transform: scale();" dzieci kontenerów

Question

Mam elementu kontenera z długimi zawartości, która jest skalowana:

.container { 
    transform: scale(0.9); 
} 

wewnątrz tego kontenera mam dziecko div który jest używany jako popup. Jest umieszczony absolutny z górnym 50%

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

ale niestety, gdy pojemnik jest skalowany to 50% nie działa. Muszę użyć ~240%, jeśli pojawi się on na dole strony.

Czy znasz teraz szczegóły dotyczące stosowania pozycjonowania na elementach skalowanych elementów?

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

Answer 1

Dodaj do .wrap:

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

Musisz zmienić położenie .popup (obecnie rama odniesienia jest .wrap zamiast elementu html), ale w Chrome przełączanie skali działa dobrze po tej zmianie.

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