sized div containing a scaled div not positioning correctly

Question

I'm sorry for the overly specific question heading but I have no idea what more general thing could be going on. Clearly I'm missing something

Take a look at this jsbin:

http://jsbin.com/aguhux/1/edit

Note that you have to look at it in edit mode, for some reason (I suspect having something to do with the fact that I'm basically doing a jsbin technique inside of jsbin) the js escapes in the full view and munges the page.

What I have is basically

p{slipsum text}
div#preview (hard coded height, width)
  div (css3 scale transform)
     iframe
p{slipsum text}

where the contents of the iframe are built up on the fly and also have their height and width set manually.

the space for the #preview is allocated properly in the flow content but for some reason it's children escape the container and overlay the bottom paragraphs.

Why on earth is this happening? How can I stop it?

This happens in both chrome and firefox so I know it's not a browser bug.

Answer 1

Ok, I figured it out - it had to do with scaling.

Here's the working jsbin

Apparently when you scale an element you scale it's contents but the element itself remains the size it would have been if the contents had NOT been scaled (why on earth that would be the default functionality is beyond me). The solution therefore is to ALSO translate everything UP by the scalingFactor*originalHeight - this gets you positioned vertically. To position horizontally for some reason you have to translate left by scalingFactor*expectedWidth (which should be scalingFactor*scalingFactor*originalWidth ).

Anyone who wants to chime in with a justification of this craziness...I'm all ears.