CSS Parallax 在 Chrome 中工作，但不能在 Firefox 中工作

Question

据

我所知，正如Keith Clark关于纯CSS视差的博客文章所记录的那样，CSS视差应该可以在除IE以外的所有主要浏览器中工作，因为Microsoft尚未实现对transform-style:preserve-3d的支持。

然而，我自己对这种效果的基本实现，在这个jsFiddle中演示，适用于Chrome 39，但不适用于Firefox 34。后者似乎甚至没有应用

.back {
    transform:translateZ(-2px);
}

风格。这是什么原因呢？有什么解决办法吗？我试图禁用和启用每个元素上的各种属性，但没有成功。然而，我不知所措地解释Keith Clark在这里的实现是如何工作的，但我的却没有。

Answer 1

HTML

中有几个问题阻止了Firefox的工作。首先，.container overflow:hidden是视差项目的直接父项。您的身体标签(已经具有特定的视差溢出设置overflow-x: hidden; overflow-y: auto;(需要是视差组的直接父级。

其次，您的非视差项目(lorem ipsum 段落(还需要position: relative;和 z 索引，以便您可以控制分层。我在你的JSFiddle页面上的FF中尝试过它，它可以工作。我试图自己解决同样的问题，因为非直接包装器在 Chrome 中会导致不同的问题。