为什么-webkit-transform：translate3d（0,0,0）与固定的孩子混在一起

Question

我在过去几个小时里一直试图找出一个子元素如何定位于其父元素而不是屏幕端口，即使它被定位为“固定”。非常幸运的是，我偶然发现，父母的-webkit-transform: translate3d(0, 0, 0)会让事情变得糟糕。我正在使用bootstrap框架，因此他们确实将此属性放在父元素之一的.navbar-fixed-top类上。一旦我将其移除，孩子就开始重新定位视口。所以我有两个问题：

1. 为什么-webkit-transform: translate3d(0, 0, 0)会做这些讨厌的事情？
2. 为什么bootstrap的人把这个属性放到.navbar-fixed-top类？

更新
好吧，似乎我找到了第二个问题的答案。这是提交消息：

  

将translate3d应用于模态，导航栏固定和附加到战斗浏览器   重绘

以下是第二个问题的答案：

  

转换的任何非计算值都会导致   创建堆叠上下文和包含块。物体   充当固定位置后代的包含块。

Answer 1

关于你的第一个问题：

您正在使用转换。这就是造成这个问题的原因。

查看规范：The Transform Rendering Model

  

为'transform'属性指定'none'以外的值   在元素处建立一个新的局部坐标系   适用于。

因此具有固定定位的元素将变为相对于具有变换的元素 - 而不是视口

Answer 2

我使用这个“hackery”（ - webkit-transform：translate3d（0,0,0））来修复变换比例中的毛刺（一些在我与页面交互时移动的元素）但我有一个位置问题固定在webkit上（我无法将注意力集中在固定定位的文本输入上），当我删除它时，它被修复了。因为我只在firefox上使用转换比例，所以我没有问题将它删除（在webkit上我最终使用zoom比zoom更好：scale（但是-webkit-transform：translate3d（0,0,0）是遗留css留下的，我希望firefox也支持缩放）