为什么我的视角body导致FF显示不正确

Question

我有一个元素 (div)，我 position: fixed;。此元素不应影响内容流。

但是在我使用的CSS-Theme中，这个规则

body {
    perspective: 800;
}

已应用。这会导致我的元素在 Firefox 中流入我的 body。我的 body 可以向右滚动。 （好像我设置了position: absolute;，但实际上我使用的是position:fixed）

http://codepen.io/anon/pen/zxWweY

这在 Chrome 中看起来不错，那么 FF 到底发生了什么？这是预期的行为吗？

Answer 1

这是因为 perspective 和 transform 都为固定定位的元素建立了一个包含块（有点像相对定位的容器如何处理绝对定位的后代）。这在 Transforms Module:

中说明

对于transform

For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.

对于perspective：

The use of this property with any value other than none establishes a stacking context. It also establishes a containing block (somewhat similar to position: relative), just like the transform property does.

所以这意味着 .loading-circle 最初位于 body 的顶部和右侧（它本身不会导致滚动条）但是然后你将这个元素在 X 方向上变换 50%（到右）并将其旋转 45 度。

因此，当您移除透视图时，此元素相对于视口定位（如果元素溢出，则不会添加滚动条）但是当添加透视图时，正文成为新的包含块，因为它溢出了正文滚动条已添加。