Transform3D' Not Working With Position: Fixed Children

'transform3d' not working with position: fixed children

This is because the transform creates a new local coordinate system, as per W3C spec:

In the HTML namespace, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.

This means that fixed positioning becomes fixed to the transformed element, rather than the viewport.

There's not currently a work-around that I'm aware of.

It is also documented on Eric Meyer's article: Un-fixing Fixed Elements with CSS Transforms.

How to force position fixed when parent container has a transformation?

The Answer is simple this is not possible with CSS. Visit the following question for details

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

'transform3d' not working with position: fixed children

But you can achieve your target with js here is a basic example.

$(window).scroll(function() {    $(".transform-fixed").css({        "top": $(window).scrollTop()    });})

.rotate {  transform: rotate(30deg);  background: blue;   width: 300px;  height: 300px;  margin: 0 auto;  }.fixed {  position: fixed;  background: red;  padding: 10px;  color: white;  top: 50px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><html>
<body>  <div class="rotate">    <div class="fixed transform-fixed"> I am fixed inside a rotated div.</div>  </div>  <div class="fixed"> I am fixed outside a rotated div.</div></body>
</html>

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

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.

Scrolling the content behing fixed element is not happening

Problem is with transform: translate3d styles on element .page-container.

Commenting these styles the problem goes away, 'Others detail' element would be fixed. You can try to comment/uncommend in the fiddle below.

https://jsfiddle.net/nLbntzqk/

EDIT:
Now I've found more info, see 'transform3d' not working with position: fixed children for more detail explanation.

Position fixed is not working in any browser

This is due to transform: translate3d(0, 0, 0); on the parent <div class="off-canvas panelwrap" role="panel-wrap">. Take a look here to fix problem : 'transform3d' not working with position: fixed children