后台附件:修复不工作 – Android Chrome(v40)

背景

(这个问题 之前已经有很多次了 ,我知道,但是,似乎每次都是由不同的东西引起的,我已经经历了四种不同的StackOverflow答案线程,并尝试了一切,似乎没有任何东西可以工作,所以我相信这是一个新问题。)

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

  • 所有桌面浏览器 – 工作
  • 移动Firefox – 工程
  • 默认的Android /三星浏览器 – 工程
  • 移动版Chrome – 无法使用

我把这个问题转化为一个更简单的可复制的testing,它是一个单独的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> 


JSFiddletesting

为了便于在智能手机上进行testing,请使用代码片段: http : //jsfiddle.net/LerLz1L2/


我试过的东西

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

下面的代码在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; } 

这适用于几乎所有的浏览器,除了原生的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,这是高度推荐的

在Android浏览器上寻找bug(background-attachment:fixed)的解决scheme。

希望有帮助!

有这么大的问题 – 这是一个反复出现的问题(至less可以追溯到版本4.0.0),还没有完全解决。 错误报告在这里: https : //issuetracker.google.com/issues/36908439

我的androidtesting机在Android 7.0.0上运行chrome 60 – 仍然没有完全修复。 顶部或中心alignment的背景似乎工作正常,但底部alignment,特别是右下angular是Android的噩梦。

我find的最佳解决方法是将固定的背景图像放入单独的专用div中,而不是浏览器背景本身…(

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

将背景图片放入浏览器的效果最差,我发现的其他解决方法大多是在较旧的IE浏览器中产生抖动。

所有我想要的背景图像样式,当放在一个专门的div时,完美的作品。 只有当它们放置在浏览器背景中时,才会出现错误。

希望这可以帮助。