为什么 -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. 为什么引导人员将此属性用于 .navbar-fixed-top 类？

更新
嗯，看来我已经找到了第二个问题的答案。这是提交信息：

将 translate3d 应用到 modal、navbar-fixed 和 affix 浏览器 重绘

第二个问题的答案如下：

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

Answer 1

关于你的第一个问题：

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

查看规范：The Transform Rendering Model

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

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

Answer 2

我使用这个“hackery”(-webkit-transform: translate3d(0, 0, 0)) 来修复变换比例的故障（一些元素在我与页面交互时移动）但我的位置有问题固定在 webkit 上（我无法将焦点放在固定定位的文本输入上），当我删除它时它是固定的。因为我只在 Firefox 上使用变换比例，所以我删除它没有问题（在 webkit 上我最终使用比 transform:scale 效果更好的缩放（但是 -webkit-transform: translate3d(0, 0, 0) 是遗留在旧版 css 中的），我希望 Firefox 也支持缩放）