web-dev-qa-db-ja.com

Background-attachment：fixed Not Working-Android Chrome（v40）

バックグラウンド

（これは 尋ねられたbefore 、 何度も でした。しかし、それは毎回異なること。私は約4つの異なるStackOverflow回答スレッドを試し、すべてを試しました。もう何も機能していないようですので、これは新しい問題だと思います。）

とにかく、私は_background-attachment:fixed;_を使用して修正する必要がある背景画像を持つHMTL要素を持っています

  • すべてのデスクトップブラウザ-機能
  • モバイルFirefox-動作します
  • デフォルトのAndroid/Samsungブラウザー-機能
  • モバイルChrome-機能しません

私は問題をより単純な複製可能なテストにスピンしました。これは、単一のsection要素であり、ページの高さのto _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_に設定します
androidcssgoogle-chromebackground-attachment
16
Andy Mercer

以下のコードは、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;
}

私はこれを ここ から得ました

7
devCra

これには大きな問題がありました-これはAndroid（少なくともバージョン4.0.0までさかのぼります）で繰り返し発生する問題であり、まだ完全には修正されていません。バグレポートはこちら： https://issuetracker.google.com/issues/36908439

私のAndroidテストマシンの実行chrome 60 on Android 7.0.0-まだ完全には修正されていません。上または中央に配置された背景正常に動作しているように見えますが、下の配置、特に右下はAndroidの悪夢です。

私が見つけた最良の回避策は、ブラウザの背景自体とは対照的に、固定背景画像を別の専用divに配置することです...（

Divをビューポートの高さと幅の100％に設定し、固定位置とz-indexを-10に設定してから、ブラウザーの背景を空白のままにして、そのdivにすべての背景イメージのスタイル設定を配置します。

背景画像をブラウザに配置するのはせいぜい遅れており、私が見つけた他のほとんどの回避策は、古いIEブラウザで不安定なスクロールを作成します。

私が望むすべての背景画像のスタイリングは、専用のdivに配置すると完全に機能します。それらをブラウザのバックグラウンド自体に配置した場合にのみ、問題が発生します。

お役に立てれば。

2
Shannon

これは、ネイティブ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ブラウザでのバグ（背景添付ファイル：修正済み）の解決策を探しています。

願っています！

1
Sergio Quintero

私はこの問題を解決するために別のアプローチを取りました。私は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>
0
one