ios - 背景画像が iOS で正しく表示されない

Question

Web サイトでタイル可能な背景画像を使用しています。このサイトはすべてのデスクトップブラウザーで問題なく表示されますが、iPad Mini (iOS 6.1.3 を実行) でサイトを表示すると、背景画像に筋が入ります。ほとんどのページで、きれいに見える線 (背景画像のサイズ) と、同じサイズの背景画像の別の線などのパターンが見られます。

問題を示すスクリーンショットを次に示します。

iPad エラーのスクリーンショット

背景に必要な CSS は次のとおりです。

#wrap {  
   margin:0 auto; 
   position:relative; 
   padding:0; 
   background: #B3B1B2 url(/images/bgs/parchment2.jpg); 
}

iPadのキャッシュをクリアしようとしましたが、うまくいきませんでした。なぜこれが起こっているのか途方に暮れています。この問題を防止および解決するにはどうすればよいですか?

アップデート

ラッパーのjsFiddleを作成しました。ウェブサイトでは問題ないようでした。だから私はそれが私のコードのどこかにあると仮定することを余儀なくされています。ただし、これはサイトですぐに行われるとは限りません。Fiddle で発生する可能性がありますが、発生していません。自分のサイトの場合、問題の原因となっているコードを追跡するにはどうすればよいですか?

更新 2

背景画像をhtml, bodyタグに変更しましたが、問題は引き続き発生しますが、それほど悪くはなく、自動的にクリアされます。どうすれば問題を一挙に防ぐことができるのか、私はまだ疑問に思っています。

アップデート 3

PNGに切り替えるという@Riskbreakerのアイデアを試しました。これはうまくいきませんでした。まだ線が見えます。また、バックグラウンドファイルも大幅に増加しました (30k からほぼ 200k に)。また、画像自体である可能性があると考えて、まったく異なる背景画像を試しましたが、それでもエラーが発生しました。ファイルサイズを考慮してjpgに戻しました。

この問題を解決するにはどうすればよいですか? それはiOSの問題ですか、それとも私のコードに何かありますか?

問題のサイトはhttp://www.lfrieling.com/です。これは、iOS 6.1.3 (この記事の執筆時点で最新) を実行している iPad Mini でのみ表示されます。同じバージョンの iOS を実行している iPhone では、これは表示されません。また、これは他のページよりも長いページでよく見られます。プロフェッショナル > リソースを参照してください。

score 4 · Accepted Answer

ハードウェアアクセラレーションを試しましたか? 背景を追加-webkit-transform: translateZ(0);するのと同じ css に追加します。これはレンダリングの問題であると思われ、Chrome で CSS トランジションを使用すると、ハードウェアアクセラレーションによってレンダリングの問題が修正されるため、これは私の推測です。

#wrap {  
   margin:0 auto; 
   position:relative; 
   padding:0; 
   background: #B3B1B2 url(/images/bgs/parchment2.jpg);
   -webkit-transform: translateZ(0); 
}

または、メディアクエリを使用して、Retina ディスプレイイメージをサポートするデバイス用に試してみませんか?

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
  #wrap {  
   background: #B3B1B2 url(/images/bgs/parchment2_2x.jpg);
  }
}

メディアクエリのソース *

レンダリングの問題を解決する-webkit-transform: translateZ(0);には、ページのコンテンツをラップしている他のタグに追加してみてください。これにより、ロード/レンダリングの問題を防ぐことができます。

score 0 · Accepted Answer

これを試してください、これはあなたを助けるかもしれません. に追加overflow: hidden; height: 1%;します#wrap。

score 0 · Accepted Answer

Lynda まず第一に、これは見栄えの良いウェブサイトです。次に、次の 2 つのアドバイスを考慮する必要があります。

@media ルール

各デバイスのCSSファイルルールを記述します（ここではいくつかのメディアのリスト）
デスクトップ、タブレット、テレビ、携帯電話など、あらゆる画面サイズで Web サイトをテストします。

私があなたを助けたと思うのはそれだけです。

score 0 · Accepted Answer

これが役立つかどうか試してください、

に追加repeatした後#wrap、

に追加overflow:auto;します.height

画像サイズは 512x512 で、.height は 2000 です。

更新されたフィドル

これが機能するかどうかはわかりませんが、問題は、内側の画像をレンダリングしているときに背景を適切にレンダリングできないことです。

参考までに: -webkit-transform: GPU を使用するため、デバイスで GPU が有効になっていない場合にも問題が発生します。

これがうまくいくことを願っています..

score 0 · Accepted Answer

-webkit-background-sizebody タグに追加してみてください。

body {
    -webkit-background-size: 512px 512px;
}

ios - 背景画像が iOS で正しく表示されない

6 に答える 6

Related

Reference