Why `transform` break` position: fixed`?

Question

In fact, I found the cause of the problem. Now my question is, why is adding transform to your html, body interrupting position: fixed ?

Original problem

The simplest CSS task seems to fail: position: fixed does not preserve the position of the element relative to the viewpoint. Consider the following stylesheet:

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

The first time the page loads, the correct positioning. But any changes in the viewport, such as scrolling or resizing, do not affect the positioning of the .stay-there-dammit . Thus, he does not adapt his position to the new viewport.

Oddly enough, this site , which shows how position: fixed should work, actually works in my browser without any problems!

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

Btw. I am using Bootstrap 3.

UPDATE:

It looks like this conversion, set by a third-party application in html,body , broke position: fixed . Here is what I needed 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); } 

The following question seems to address the same issue:

Fixed positions do not work when using -webkit-transform

BUT WHY?

Answer 1

Regarding why , a quick quote from an article from meyer:

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

This is a strange behavior that has been since 2011.