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

Question

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

但是在我使用的 CSS 主题中，这条规则

body {
    perspective: 800;
}

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

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

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

Answer 1

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

对于转换

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.

对于透视:

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 度。

因此，当您移除透视图时，此元素相对于视口(viewport)定位(如果元素溢出，则不会添加滚动条)但是当添加透视图时，主体成为新的包含 block ，并且由于它溢出，主体滚动条被添加.