Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

webkitTransform bug in safari? Am i going mad?

webkitTransform bug in safari? Am i going mad?

Problem

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

Problem courtesy of: Alex

Solution

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 i.e. 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 
Solution courtesy of: Alex

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

webkitTransform bug in safari? Am i going mad?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×