Positions fixed doesn't work when using -webkit-transform

Question

Hello everybody

I am using -webkit-transform (and -moz-transform / -o-transform) to rotate a div. Also have position fixed added so the div scrols down with the user.

In Firefox it works fine, but in webkit based browsers it's broken. After using the -webkit-transform, the position fixed doesn't work anymore! How is that possible?

Answer 1

After some research, there has been a bug report on the Chromium website about this issue, so far Webkit browsers can't render these two effects together at the same time.

I would suggest adding some Webkit only CSS into your stylesheet and making the transformed div an image and using it as the background.

        @media screen and (-webkit-min-device-pixel-ratio:0) {
            /* Webkit-specific CSS here (Chrome and Safari)*/

    #transformed_div {
    styles here, background image etc }
}

So for now you'll have to do it the old fashioned way, until Webkit browsers catch up to FF.