CSS Parallax 适用于 Chrome，但不适用于 Firefox？答案

【问题标题】：CSS Parallax works in Chrome, but not Firefox?CSS Parallax 适用于 Chrome，但不适用于 Firefox？
【发布时间】：2015-02-20 09:01:48
【问题描述】：

据我所知，正如 Keith Clark 关于纯 CSS 视差 here 的博文所述，CSS 视差应该适用于除 IE 之外的所有主要浏览器，因为微软尚未实现对 transform-style:preserve-3d 的支持.

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

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

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

【问题讨论】：

【解决方案1】：

HTML 中有几个问题阻止了 Firefox 工作。第一个是.container 和overflow:hidden 是视差项的直接父级。你的身体标签（已经有特定的视差溢出设置overflow-x: hidden; overflow-y: auto;）需要是你的视差组的直接父级。

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

【讨论】：