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

Posted 2023-03-06

【中文标题】背景附件：固定不工作 - Android Chrome (v40)

【英文标题】：Background-attachment:fixed Not Working - Android Chrome (v40)

【发布时间】：2015-04-16 10:14:36

【问题描述】：

背景

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

无论如何，我有一个带有背景图像的 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

【问题讨论】：

它也不适合我。我还没有找到解决办法。在 Android Nougat 上运行的 Chrome 54.0.2840.85。

很难相信他们还没有修复这个问题 - Android 7.0.0 上的 Chrome 57.0.2987.132。它影响线性渐变和常规 JPG 背景图像。我尝试过的建议解决方法之一都没有奏效。

澄清一下——如果页面只需要垂直滚动，那还不错。当地址栏消失时，该空间量会出现在底部，并且不会被线性渐变或背景图像填充。但是，如果页面需要任何水平滚动，那么一切都会崩溃。

【参考方案1】：

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

【参考方案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>

【参考方案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得到这个

【讨论】：

高度 100% 是关键

我认为这里有两件重要的事情：html height: 100% （OP 已经有了）和-webkit-background-size: cover; — -moz- 可能不再需要，-o-，我不需要知道。

【参考方案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 中时都能完美运行。只有将它们放在浏览器背景本身时才会出错。

希望这会有所帮助。

【讨论】：

DIV是固定的还是DIV里面的背景是固定的？我有一个具有固定背景的滚动 DIV 元素，但它遇到了与原始问题相同的问题。

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

您可能需要修复 div 及其背景...但是 - 自从写了这篇文章后，我设法解决了问题 没有 使用固定的单独背景分区。首先，将您的固定背景图像作为 .html 样式的一部分。接下来，确保您的 .html 高度为 100%，并且 y 溢出为“隐藏”。最后，在您的 .body 样式中，将高度设置为 100% 并将 y-overflow 设置为“滚动”。这应该可以完美运行 - 您必须将 .html 和 .body CSS 样式的高度设置为 100%，否则将无法正常工作。我在 [link] (m233933.000webhostapp.com) 使用了这种技术

【参考方案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

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

希望有所帮助！

【讨论】：

在某些（可能是所有）手机上的 chrome 中，“固定”似乎被忽略了 - 背景移动并在 x 和 y 轴滚动时留下空白区域。在其他设备和所有其他浏览器中运行良好。 Chrome 已成为网络编码人员的新“IE 问题”。