javascript - 固定元素不服从 Mozilla 中 overflow hidden 的父元素

Question

我有多个带有背景图像的横幅，我想在其中使用固定的背景附件。由于 Chrome 中的背景附加固定滞后，我将背景放在固定的 div 中以绕过它。

它在 Safari 和 Chrome 中有效，但在 Mozilla 中无效，我不明白为什么。

关于如何解决这个问题的任何选项或线索？

例子: http://codepen.io/anon/pen/NGXZYo

.block .banner {
    position: relative;
    overflow: hidden;
    padding: 140px;
    z-index: -1;
}

.parallax {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;

    z-index: -1;

    -webkit-transform: translateZ(0);

    pointer-events: none;
}

Answer 1

改变

-webkit-transform: translateZ(0);

到

-webkit-transform: translateZ(0);
transform: translateZ(0);