为什么`transform` break`position:fixed`？

Question

实际上我找到了导致问题的原因.我的问题是为什么要加入transform你的html, body休息时间position: fixed？

原来的问题

对我来说,最简单的CSS任务似乎失败了:position: fixed不保持元素相对于视点的位置.考虑以下样式表:

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

页面首次加载时,定位正确.但是对视口的任何更改(例如滚动或调整大小)都不会影响.stay-there-dammit元素的定位.所以说它不会使其位置适应新的视口.

奇怪的是这个网站显示了position: fixed应该如何工作,实际上在我的浏览器中工作没有任何问题!

所以问题是:是否有任何可能破坏固定定位的东西？

顺便说一句.我使用Bootstrap 3.

更新:

似乎是由某些第三方应用程序设置的转换html,body打破了position: fixed.这是我必须删除的内容:

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);
}

似乎以下问题解决了同样的问题:

使用-webkit-transform时,固定的位置不起作用

但为什么？

Answer 1

关于为什么,迈耶的这篇文章的快速引用:

即使对于已设置为position:fixed的后代,转换后的元素也会创建一个包含块.换句话说,变换元素的固定位置后代的包含块是变换元素,而不是视口

这是一种奇特的行为,自2011年以来一直存在.