CSS Parallax可在Chrome中使用，但在Firefox中无法使用？

Question

As far as I'm aware, as documented by Keith Clark's blog post on pure CSS parallax here , CSS parallax should work in all major browsers except IE, since Microsoft has not as of yet implemented support for transform-style:preserve-3d .

Yet, my own basic implementation of this effect, demonstrated here in this jsFiddle , works in Chrome 39, but does not Firefox 34. The latter does not seem to even be applying the

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

style. What is the reason for this? Is there any fix? I've attempted to disable and enable various properties on each element to no success. Yet, I'm at a loss to explain how Keith Clark's implementation here works, yet mine does not.

Answer 1

there are a couple of problems in the HTML that are preventing Firefox from working. The first is that .container with overflow:hidden is a direct parent of your parallax items. Your body tag (which already has the specific parallax overflow settings overflow-x: hidden; overflow-y: auto; ) needs to be the direct parent of your parallax-group.

Second, your non-parallax items (the lorem ipsum paragraphs) also need position: relative; and a z-index so you can control the layering. I tried it in FF on your JSFiddle page and it works. I was trying to solve the same problem myself because the non-direct wrapper causes different problems in Chrome.