“position: fixed” not woking when parent has the “transform” CSS property

Question

In my project I have screen which should ease-in from right side of the screen so for that thing I have used transform: translateX(100%) and then changing that

Answer 1

This is not a bug.

Take a look at the spec: The Transform Rendering Model

Specifying a value other than ‘none’ for the ‘transform’ property establishes a new local coordinate system at the element that it is applied to.

So according to the spec: the element with fixed positioning will become relative to the element with the transform - not the viewport

As a workaround you could:

1) Use transitions (eg. on the left property) instead of transform (translateX)

2) Remove the position:fixed button from the container which uses transforms