2017-09-17 18 views
0

背景色が#000の「右下」の背景画像の配置が必要なウェブサイトがあります。背景画像右下の位置合わせエラー - アンドロイド上のクロム

ブラウザのウィンドウの外に背景イメージをレンダリングするアンドロイドのchromeを除いて、これまで試したことのあるすべてのOSとブラウザ(Chrome、つまりmoz、safari)でCssテストを行っても問題ありません。 他の画像アラインメントはうまく動作します - 問題は、右下のアライメントがあり、のみ、アンドロイドにクロムが付いているようです。

問題のページのURL:Features a background-image: bottom right alignment

CSSを次のように

body { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-size: 1em; 
    background: url("../images/bg_prices_XL.jpg"); 
    background-size: contain; 
    background-color: #000; 
    background-repeat: no-repeat; 
    background-position: bottom right; 
    background-attachment: fixed; 
} 

を私は背景画像に配置を変更した場合:トップ右;問題が解消されます。

ページはandroid mozで正しくレンダリングされます。したがって、私は-webkit固有の配置を含める必要がありますか?

html,body { 
    height 100%; 
    width 100%; 
} 

...しかし、運を:

Havdを追加しようとしました。ビューポートのサイズが既にデバイスサイズに設定されていると、Chromeは見た目の下にあると思われるように見えます。

CSSのhtmlセクションで背景画像をスタイリングしようとしましたが機能しませんでした。

すべてのことを歓迎します。

+0

"pc and ios" ... – jdgregson

+0

謝罪 - 明確にするために、これはAndroidのchromeを除いて、私が試したすべてのブラウザとOSプラットフォームで大丈夫です。 – Shannon

答えて

1

私はページスルークロム開発ツールを調べました。あなたがバックグラウンドの添付ファイルを削除すると思います。それはうまくいくでしょう。 enter image description here

+0

Thx - 他のブラウザやプラットフォームでの固定画像のスクロールを無効にしますか?どうやらこれは8年前のアンドロイドのバグです。参照:https://issuetracker.google.com/issues/36908439 – Shannon

0

...決して気にしない人。私はバックグラウンドを100%の高さと幅のdivに固定し、負のZ-インデックスを作成しました。それは私にとってぎこちない回避策のように感じますが、うまくいくようです。あなたに感謝していただければ幸いです。