位置：固定在溢出：隐藏的父 - 跨浏览器替代background-attachment：固定？

Question

我有一个相当常见的用例，一系列大图像的营销页面，我希望的行为像background-attachment:fixed，但避免使用该方法的相当显着的性能问题。

通过使用包装的div，用position:relative; z-index:0; overflow:hidden围绕一个全屏幕的固定格包含图像，效果正是我想在Chrome和Safari（我到目前为止已经测试过）：

http://codepen.io/geelen/pen/FxyKj

在Firefox上，overflow:hidden似乎没有任何效果，因此页面上的三个图像全都呈现为全屏。目前还没有机会测试IE，但如果我至少可以得到Chrome &火狐工作&表现很好，那将是一个开始。

有趣的是，丢弃z-index:0断裂在Chrome的影响以及作为position:relative与自动的z-index不引入新的堆叠内容，这似乎是什么引起的overflow:hidden有效果。我想知道是否有办法让Firefox以类似的方式渲染？

Answer 1

如何使用此代码？ http://codepen.io/anon/pen/vFJxk

.image { 
    transform: translateZ(0); 
    background-size: cover; 
    //position: fixed; 
    //top: 0; 
    //left: 0; 
    //z-index: 0; 
    height: 100%; 
    width: 100%; 
    background-position: 50% 50%; 
    background-attachment:fixed; 
    overflow: hidden; 

我已经在IE 11中进行了双重检查，它的工作完美。