IE中的CSS视差背景图像白色空间

Question

我正在使用Keith Clark的CSS-only方法创建一个双层视差效果,以便背景图像的滚动速度低于网站其他内容的速度.为了清楚起见,图像覆盖整个页面,内容位于其上.

我的网站分为两个主要div元素(和一个容器div) - 一个用于背景图像,另一个用于页面内容.下面是我用于不同div元素的代码.

.container {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
  position: absolute;
  left: 0;
  right: 0;
}

.background {
  background-image: url(images/background.jpg);
  background-size: cover;
  position: absolute;
  /* margin-bottom: -200em;
     overflow: hidden; */
  height: 200em;
  left: 0;
  right: 0;
  transform: translateZ(-2px) scale(3);
}

.page-content {
  transform: translateZ(0);
}

如果没有添加margin-bottom和overflow属性,一旦将背景div元素设置为足以覆盖所有页面内容的高度,背景元素将最终留下垂直白色空间.

添加负边距后,问题在Chrome中得到修复,并在Firefox*中排序,并且我将div元素的高度和负边距增加到远远超过确保它适用于不同页面长度所需的范围.

虽然IE 11仍有白色空间.通常,该background-size: cover;属性会删除任何空白区域,但这不适用于视差效果.

你知道有什么方法可以删除适用于IE9 +和其他主流浏览器的空白区域,还是我运气不好？

这是一个JSFiddle,其代码与我正在创建的网站几乎完全相同.

*Firefox没有空格,但负边距对所有页面长度都不起作用.对于较短的页面,您可以滚动浏览页面内容的末尾.我可以通过更改每个页面的高度和边距来解决这个问题,但如果可能的话,我们将感谢全球解决方案.

Answer 1

目前还没有任何方法可以让 CSS 视差在 IE 中发挥作用。但由于基于 Webkit 的浏览器，如 Chrome 和 Opera（我尚未测试过 Safari），可以很好地处理视差，因此可以针对 Webkit 浏览器并为它们显示视差背景，并为其他浏览器显示不同的代码（没有视差）。

首先，我将视差代码放入@media查询中，如下所示：

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
  .container {
    [rule contents]
  }

  .background {
    [rule contents]
  }

  .page-content {
    [rule contents]
  }
}

第一个属性(-webkit-min-device-pixel-ratio:0)针对所有基于 Webkit 的浏览器，但由于我假设并非所有版本的 Webkit 浏览器都支持这种视差效果，因此我还添加了第二个属性，它将浏览器限制为Chrome 29+ 和 Opera 16+（我只是排除了 Safari）为了安全起见，但如果您发现它有效，您也可以选择另一种针对 Safari 的 hack ）。

使用特征检测可能是一个更好的主意，但我还没有学习JavaScript，上面是一个仅CSS的解决方案。

将视差规则放入查询中后@media，我为后元素设置了替代默认规则div。

div（虽然在没有视差的情况下不需要将网站分为前面和后面的元素，div但使用背景图像设置后面的元素而不是body或html消除大量的滞后。）

为了尽可能保留与视差版本的相似性，我将背景图像设置为position: fixed.

由于浏览器自上而下地读取 CSS 文件并按该顺序应用样式，因此将视差.back规则（及其周围的@media查询）放在文件中标准的非视差规则之后非常重要。.back

当然，我确保适用于标准规则和视差.back规则的所有属性仅出现在默认规则中以节省空间（它们将由 Webkit 浏览器与视差版本中的附加规则一起应用）。