为什么`transform`会破坏`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 元素的定位。可以这么说，它不会使自己的位置适应新的视口。

奇怪的是this site 显示了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);
}

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

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

但是为什么？

Answer 1

关于为什么，meyer 对此article 的快速引用：

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

这是自 2011 年以来一直存在的一种古怪行为。