IE中的CSS视差背景图像空白答案

【问题标题】：CSS Parallax Background Image White Space in IEIE中的CSS视差背景图像空白
【发布时间】：2015-06-28 00:12:33
【问题描述】：

我正在使用Keith Clark's 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 没有空白，但负边距不适用于所有页面长度。对于较短的页面，您可以滚动通过页面内容的末尾。我可以通过更改每个页面的高度和边距来解决这个问题，但如果可能的话，我们将不胜感激。

【问题讨论】：

为什么你使用height: 100%而不是像文章提到的height: 100vh？
@LeandroRuel，因为百分比得到了更好的支持并且它们似乎具有相同的效果，所以我决定使用它们而不是 vh 单位。我刚刚测试了将单位更改为 vh，但它并没有解决 IE 11 中的问题。
是的，但是，如果你设置百分比，你还需要将html,body 设置为height: 100%，以使元素达到其高度的100%。或者您可以使用固定高度将元素包裹在父元素中
@LeandroRuel，我认为默认情况下就是这样。另外，vh 不受支持。
@AndrewHansen 的问题是，对于.back，您已将高度指定为 50em，大致转换为 50*16=800px，但您的 line-height: 300px; 转换为 900px，因为您有三个文本元素，因此是空白。检查这个小提琴jsfiddle.net/Lawrg9mv/15我已经删除了图像，因为它没有加载，url显示白色背景并将高度更改为60em

标签： css background-image whitespace parallax

【解决方案1】：

如果您的目标是让这项工作在 IE9 上运行，我认为您会遇到一些问题。这对我有用，但不是不增加.back div 的大小高度。

这在 IE9 和 Chrome 中适用于我，但您可能只需要一些 IE 条件。

http://jsfiddle.net/Lawrg9mv/21/

补充：

.back {
    height: 80em; 
    -ms-transform: translateZ(-2px) scale(3);
}

.front {
    -ms-transform: translateZ(0);
    z-index: 10;
    position: relative;
}

【讨论】：

嗯...奇怪的是这对我不起作用。也许我的 IE11 安装有问题。我想我还注意到我的页面在 IE 中的显示方式存在更根本的错误——没有视差！你说这在不增加高度的情况下是行不通的。这是真的，这是问题的一部分。负边距应该消除增加的高度，但事实并非如此。通过增加更多的高度，“页面的结尾”不再是页面的结尾，至少在我尝试过的时候。无论如何，我想知道是否还有其他人在 IE 中也遇到了无视差问题。
该演示在 IE 中运行良好，但有点不同，因为背景图像是固定的，而不是以较慢的速度滚动。如果我尝试实现的视差系统失败，我可能会恢复为固定的背景图像。

【解决方案2】：

目前还没有任何方法可以让 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+ and Opera 16+（我排除了Safari 只是为了安全起见，但如果你发现它可以工作，你也可以choose another hack 以 Safari 为目标）。

使用feature detection 可能会更好，但我还没有学过 JavaScript，以上是纯 CSS 的解决方案。

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

（尽管在没有视差的情况下不需要将站点分为前后div 元素，但将后面的div 元素设置为背景图像而不是body 或html 可以消除大量滞后。）

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

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

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

【讨论】：