CSS: Posizione errata di "transform: scale();" i bambini del contenitore

Question

ho un elemento contenitore con il contenuto lungo che viene scalato:

.container { 
    transform: scale(0.9); 
} 

all'interno di questo contenitore ho un figlio div che viene utilizzato per essere un popup. È posizionato assoluto con piano 50%

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

ma purtroppo quando il contenitore viene scalata questa 50% non funziona. Devo usare ~240% se appare nella parte inferiore di una pagina.

Avete ora alcune specifiche sull'applicazione del posizionamento sui bambini di elementi in scala?

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

Answer 1

Aggiungi al .wrap:

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

sarà necessario riposizionare il .popup (ora il sistema di riferimento è il .wrap, anziché l'elemento html), ma in Chrome la levetta della bilancia funziona bene dopo questa modifica.

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