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

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

Original problem

The most simple CSS task seems to fail for me: position: fixed does not keep the position of the element relative to the view point. Consider the following stylesheet:

.stay-there-dammit {
  position: fixed;
  right: 0px;
  left: 0px;
  z-index: 1030;
}

For the first time the page loads, the positioning is correct. But any changes to viewport such as scrolling or resizing doesn't affect the positioning of .stay-there-dammit element. So to speak it doesn't adapt its position to the new viewport.

Strangely enough this site which shows how position: fixed should work, actually work in my browser with no problems whatsoever!

So the question is: Is there anything that might break fixed positioning?

Btw. I use Bootstrap 3.

UPDATE:

It seems that it was the transform set by some third-party application on html,body that broke the position: fixed. Here is what I had to remove:

html, body {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3, mirror=1);
  -webkit-transform: scale(1, 1);
     -moz-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
       -o-transform: scale(1, 1);
          transform: scale(1, 1);
}

It seems that the following question addresses the same issue:

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

BUT WHY?

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