背景-附着:固定 在Android Chrome（v40）上不起作用

Question

背景

(这个问题之前已经被问过很多次，比如这里、这里和这里。然而，每次似乎都是由不同的原因引起的。我已经查看了大约四个不同的StackOverflow答案线程并尝试了所有方法，但现在似乎没有任何方法有效，所以我认为这是一个新问题。)

无论如何，我有一个带有背景图像的HTML元素，需要使用background-attachment:fixed;进行固定。

• 所有桌面浏览器 - 可用
• 移动Firefox - 可用
• 默认的Android/Samsung浏览器 - 可用
• 移动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用于测试

为了在您的智能手机上进行比代码片段更轻松的测试：http://jsfiddle.net/LerLz1L2/

---

我尝试过的事情

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

- Kelderic

---

对我也不起作用。我还没有找到解决方案。Chrome 54.0.2840.85在Android Nougat上运行。 - Cypress Frankenfeld

很难相信他们还没有解决这个问题 - Chrome 57.0.2987.132 在 Android 7.0.0 上。它影响线性梯度和常规 JPG 背景图像。我尝试过的所有建议的解决方法都没有起作用。 - MisterNeutron

只是为了澄清 - 如果页面只需要垂直滚动，那还好。当地址栏消失时，该空间的数量会出现在底部，并且不会填充线性渐变或背景图像。但是，如果页面需要任何水平滚动，那就会一团糟。 - MisterNeutron

Answer 1

以下代码在安卓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;
}

I got this from here

- devCra

---

高度百分之百是关键。 - diewland

我认为这里有两个重要的事情：html { height: 100% }（OP已经有了）和-webkit-background-size: cover;——-moz-可能不再必要，而-o-我不确定。 - Alexis Wilke

Answer 2

在这方面我遇到了很大的问题 - 这是安卓经常出现的问题（至少从版本4.0.0开始），尚未完全解决。有关错误报告，请参见：https://issuetracker.google.com/issues/36908439

我的安卓测试机运行的是Android 7.0.0上的Chrome 60，但问题仍未完全解决。顶部或中心对齐的背景似乎可以正常工作，但底部对齐，特别是右下角，在安卓中会变成噩梦。

我找到的最佳解决方法是将固定的背景图片放入一个专门的div中，而不是放在浏览器背景中...（

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

将背景图像放入浏览器中最多只能达到流畅的效果，在IE老版本浏览器中，大多数其他解决方法都会导致滚动时抖动。

当将所需的背景图片样式放置在专用div中时，所有的工作完全正常。只有将它们放在浏览器背景中才会出现问题。

希望这可以帮助到您。

- Shannon

---

DIV是固定的还是DIV内部的背景是固定的？我有一个带有固定背景的滚动DIV元素，但它遇到了与原始问题相同的问题。 - posfan12

如果您正在使用我上面提到的背景div方法，您可能需要修复div及其背景... - Shannon

您可能需要修复div及其背景......但是-自从编写此帖子以来，我设法在不使用固定单独背景div的情况下解决了问题。首先，请将您的固定背景图像作为html样式的一部分包含在内。接下来，确保您的.html高度为100％，y-溢出为“hidden”。最后，在您的.body样式上，将高度设置为100％，并将y-溢出设置为“scroll”。这应该完美地工作-您必须在html和body CSS样式上都将高度设置为100％，否则它将无法正常工作。我在[链接]（http://m233933.000webhostapp.com）上使用了这种技术。 - Shannon

Answer 3

这适用于几乎所有浏览器，但不包括原生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;

强烈建议先设置图像网址

正在寻找解决安卓浏览器中（background-attachment: fixed）bug的解决方案。

希望能有所帮助！

- Sergio Quintero

---

在一些（也许所有）手机上，Chrome似乎忽略了“fixed”属性，当x和y轴滚动时，页面背景会移动并留下空白区域。但在其他设备和所有其他浏览器中可以正常工作。对于Web开发人员来说，Chrome已成为新的“IE问题”。 - JosephK

Answer 4

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

- Vikram Sapate

Answer 5

我在解决这个问题时采用了不同的方法。我避免使用CSS背景策略，而是使用了一个<img>标签，并设置其CSS位置为fixed。效果非常好，完全可以取代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>

- one