为什么我对身体的看法导致FF无法正确显示

Question

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

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

body {
    perspective: 800;
}

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

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

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

Answer 1

这是因为perspective＆amp; transform都为固定定位元素建立了一个包含块（有点像容器相对于绝对定位后代的位置）。这在Transforms Module：

中说明

transform

  

对于布局由CSS框模型控制的元素，任何值   除了没有变换导致两者的创建   堆叠上下文和包含块。该对象充当   包含固定位置后代的块。

对于perspective：

  

使用除none以外的任何值的此属性都会建立a   堆叠上下文。它还建立了一个包含块（有点   类似于position：relative），就像transform属性一样。

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

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