背景附件：固定不工作 - Android Chrome (v40)

Question

背景

(这一直是askedbefore，many times，我知道。但是，它似乎每次都是由不同的事情引起的。我经历了大约四个不同的StackOverflow回答线程并尝试过一切。似乎没有任何效果了，所以我相信这是一个新问题。）

无论如何，我有一个带有背景图像的 HMTL 元素需要修复，使用 background-attachment:fixed;

• 所有桌面浏览器 - 工作
• 移动 Firefox - 作品
• 默认 Android/三星浏览器 - 工作
• 移动 Chrome - 不起作用

我已将问题转变成一个更简单的可复制测试，它是单个section 元素，设置为页面高度的200%，背景为全屏且固定。

---

代码

html,body {
    padding:0;
    margin:0;
    height:100%;
    width:100%;
}
section {
    background-position:center center;
    background-attachment:fixed;
    background-size:cover;
    background-image:url(http://www.andymercer.net/wp-content/themes/andymercer/images/background/home.png);
    height:200%;
    width:100%;
}

<section>Test</section>

---

用于测试的 JSFiddle

为了在智能手机上进行比代码 sn-p 更容易的测试：http://jsfiddle.net/LerLz1L2/

---

我尝试过的事情

• backface-visibility: hidden;
• -webkit-backface-visibility:inherit;
• -webkit-transform: translate3d(0,0,0);
• 将元素和所有父级设置为position:static

Answer 1

还是一个bug，参考这个问题-> https://issuetracker.google.com/issues/36908439

Answer 2

我采取了不同的方法来解决这个问题。我避免使用 css 后台策略，而是使用<img> 标签并设置其 css 位置：已修复。像魅力一样工作，与 css 背景图像完全相同，并且适用于 android chrome。希望对您有所帮助。

<style>
  ._background-image {
    position: fixed;
    z-index: -1;
    width: 800px;
  }
</style>

<div style="height: 100%">
 <img src="background-image.jpg" class="_background-image">
</div>

Answer 3

以下代码在我的 android chrome 中运行良好。

html {
  height: 100%;
  background: url(bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

我从here得到这个

Answer 4

对此有很多问题 - 这是 android 中反复出现的问题（至少可以追溯到 4.0.0 版），尚未完全修复。错误报告在这里：https://issuetracker.google.com/issues/36908439

我的 android 测试机在 Android 7.0.0 上运行 chrome 60 - 仍未完全修复。顶部或中心对齐的背景似乎可以正常工作，但底部对齐，尤其是右下角，在 android 中是一场噩梦。

我发现的最佳解决方法是将固定的背景图像放入单独的专用 div 中，而不是浏览器背景本身...（

将您的 div 设置为视口高度和宽度的 100%，给它一个固定位置和 -10 的 z-index，然后将所有背景 inage 样式放置在该 div 中，将浏览器背景留空。

将背景图像放入浏览器充其量是滞后的，而且我发现的大多数其他解决方法都会在较旧的 IE 浏览器中产生抖动的滚动。

我想要的所有背景图像样式在放置在专用 div 中时都能完美运行。只有将它们放在浏览器背景本身时才会出错。

希望这会有所帮助。

Answer 5

这适用于几乎所有浏览器，除了原生 android 浏览器

background-image:url(http://www.andymercer.net/wp-content/themes/andymercer/images/background/home.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover !important;
max-width:100%;
max-height:100%;
width:auto;

强烈建议先设置图片url

正在寻找安卓浏览器上的错误（背景附件：已修复）的解决方案。

希望有所帮助！