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?

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?

Concha

works fine for me, post a jsfiddle – Gregoriogregorius

A jsfiddle would work @DavidXu! The question is if there is anything on my page that might break it. The page is fairly loaded with CSS and I couldn't possibly paste/mock it in a single jsfiddle! – Concha

You need to post an example which demonstrates the problem if you’d like an answer for this. – Springtime

@Springtime if I could then I would! The question is if there are any known issues that might break the styling. – Concha

@DavidXu thanks but if you are not aware of any known issues that might break the styling I'll for someone else to show up. And I wouldn't possibly be able to give you a link to the company's website. – Concha

When u use fixed the <div> doesnt move on Scrolling use position:absolute instead – Monoceros

@Monoceros position: absolute is not relative to viewport. – Concha

Can you Link your site? – Monoceros

@t.niesse actually I just have it under body and the body has no stylings. – Concha

@t.niesse have found the problem. Cannot figure out why it has caused it! – Concha

@YanFoto you have found the answer to your original question, you should update the question title and the question if you are now asking why – Hjerpe

@YanFoto in the question you linked, the answer says it's a webkit bug – Hjerpe

@Hjerpe I have it both in FireFox and Chrome! – Concha

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.

Liman

Thanks. Finally someone who read the bold question without getting annoyed or offended by the rest! – Concha

Here's the relevant part on w3.org Spec and here's the issue on Chromium bug tracker, even though - as correctly pointed out in this answer - it's not a bug but a quirky behaviour – Triform