Why does `transform` break `position: fixed`?

Question

Actually I have found what has caused the problem. My question is now why adding transform to your html, body breaks the position: fixed

Answer 1

Regarding the why, a quick quote from this article by meyer:

A transformed element creates a containing block even for descendants that have been set to position: fixed. In other words, the containing block for a fixed-position descendant of a transformed element is the transformed element, not the viewport

It's a quirky behavior that's been around since 2011.