css - 位置 :fixed within an overflow:hidden parent - cross-browser alternative to background-attachment:fixed?

Question

我有一个相当常见的用例，一个包含一系列大图像的营销页面，我希望它们表现像background-attachment:fixed 但避免该方法存在相当严重的性能问题。

通过使用包装器 div，使用 position:relative; z-索引:0； overflow:hidden 在包含图像的全屏固定 div 周围，效果正是我在 Chrome 和 Safari 中想要的效果(到目前为止我已经测试过):

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

在 Firefox 上，overflow:hidden 似乎没有任何效果，因此页面上的三个图像都呈现为全屏显示。目前还没有机会测试 IE，但如果我至少能让 Chrome 和 Firefox 正常工作并表现良好，那将是一个开始。

有趣的是，删除 z-index:0 也会破坏对 Chrome 的影响，因为带有自动 z-index 的 position:relative 不会引入新的堆栈上下文，这似乎是导致 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 中仔细检查过，它运行良好。