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

Leave a Comment