Search code examples
htmlcssrotationcss-positioncss-transforms

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

I am using -webkit-transform (and -moz-transform / -o-transform) to rotate a div. Also have position fixed added so the div scrolls 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?

Solution

  • 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.

    EDIT: As of 10/24/2012 the bug has not been resolved.

    This appears to not be a bug, but an aspect of the specification due to the two effects requiring separate coordinate systems and stacking orders. As explained in this answer.