修复了 Chrome Mac 的背景图像错误答案

【问题标题】：Fixed background image bug Chrome Mac修复了 Chrome Mac 的背景图像错误
【发布时间】：2014-04-13 02:17:09
【问题描述】：

我正在构建一个使用固定背景图像在部分之间进行转换的网站。目前，它是纯 CSS。该效果适用于我测试过的所有浏览器，除了一个：Mac 上的 Chrome（版本 33.0.1750.146 或版本 34.0.1847.45 测试版）。似乎在 PC 上的 Chrome 上运行良好。

发生的事情很奇怪......在滚动时，图像重复和叠加，整体非常扭曲。再滚动一点后，它消失了。它不会在向上滚动时重新出现。

有什么想法或解决方案吗？！

当前页面：http://margusity.com/follies-beta

当前截图（损坏，chrome）：http://cloud.ikilledtheinter.net/ULra

当前截图（工作中，Safari）：http://cloud.ikilledtheinter.net/ULxH

看似相关的 CSS：

.chris, .eric,  {
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  z-index: 50;
  width: 100%;
  height: 100%;
}

.chris {
  background-image: url(../img/people/chris.png);
}

.eric {
  background-image: url(../img/people/eric.png);
}

编辑：这似乎是导致问题的固定背景元素。从#behind（上面未显示css）中删除“位置：固定”可以解决上述问题，但不能解决我的要求。现在正在研究解决方案！

【问题讨论】：

我在 Mac 上使用 Chrome（版本 33.0.1750.146），我没有发现任何问题
@VikasGhodke 你介意截个图看看你的样子吗？这让我很困惑...我有一个朋友在他的 Mac 上用 Chrome 测试它，它看起来和我的一样...（但我们都在小牛队，有视网膜）
给你 --> s14.postimg.org/npylargep/screenshot_47.jpg 这是我的 chrome 版本 postimg.org/image/vviz95y2b
妈的，这很奇怪。什么操作系统，@VikasGhodke？

标签： html css macos google-chrome

【解决方案1】：

我遇到了同样的问题。看起来您的网站现在正在运行，您可以分享您的解决方案吗？

编辑：删除 position: relative; 并将 html 和 body 都设置为 height: 100%; 解决了我的问题。

【讨论】：

【解决方案2】：

Chrome 38 Canary、Windows 8.1

同样的错误：http://puu.sh/aOKEH/77538a9a01.jpg

许多其他页面也出现错误..（例如 Twitter 固定背景）

【讨论】：

【解决方案3】：

切换一个未嵌套的位置：固定元素解决了这个问题。我不确定为什么。为了完全解决这个问题，我将正文设置为包含一个附件：其他元素都滚动的固定背景图像，以及它们各自的附件：固定背景图像。但是，我想知道为什么原始版本在某些浏览器上仅在 Mac 上的 Chrome 中失败，但在其他任何地方都可以使用 -__-

【讨论】：

我认为是 Chrome + Mac + Retina 的错误