webkitTransform bug in safari? Am i going mad?

Question

I think I've found a bug in safari. I wondered if anyone has encountered this, it's pretty serious but quite obscure.

look at this in chrome and in safari, when you click the link, the div rotates and should expand the page horizontally to ensure the whole page is visible. Everything works in chrome, you can see this by scrolling to the right, the bottom right hand corner touches the edge of the screen. However Safari just cuts it off? Can anyone suggest a workaround for safari got to admit I'm stumped? This is pretty serious if it's not just me which can see this...

http://jsbin.com/uqagan/3/

Thanks very much Alex

Answer 1

html, body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

Answer 2

OK, so answering my own question here, not sure if it's good form (pretty new here)

There was a bug in safari which existed up until 5.1 which did not re-evaluate the flow bounds after a 2d transform.

Solution: Update Safari or put a regular element around the child element you wish to transform please note that if this is positioned absolutely ie it's not in the standard flow (relative) you must also dynamically resize this in order for it to be effective. If you are using rotate, matrix etc you must do the trigonometry to get the new bounding box size.

Hope that helps anyone with the same issue in future.

EDIT: to further this:

if you really have to force a solution you can do something like:

//hack for bad rotation overflow support in safari <5.1
        if($.browser.safari && parseInt($.browser.version)<534)
        {
            $("html,body").css({"width":"20000px","height":"20000px"});
        }