2011-01-24 11 views
9

iPadが薄い灰色/黒色の線を表示しています。それは、モバイルSafari上でスケーリングアーチファクトのいくつかのフォームのようです。私は下の2つのスニペットを提供しました。コントラストを調整して問題を浮き彫りにしました。残念なことにiPadのディスプレイはかなり良いので、これらのラインはかなり目立ちます。iPadで表示されたWebページの細い灰色/黒色の線

ページが拡大されているので、それらは移動しているように見え、divs /画像はエッジで丸めの問題で拡大縮小されているように見え、エッジピクセルを黒とブレンドします。

誰かがこれに対して回避策または修正を見つけましたか?

おかげ

Line showing with no image

Line on edge of scaled PNG

+0

http://stackoverflow.com/questions/3903106/line-artifacts-in-mobile-safariに似ていますが、解決策についてもその質問には提案はありません。 – stestagg

答えて

11

私はモバイルサファリをズームインしたときに、これらのグレーっぽい小さな行を削除する修正の束を試みたが、私が見つけた最も簡単で柔軟性の修正はここにあった:

http://www.oddodesign.com/2010/css-tip-how-to-prevent-div-seam-lines-from-appearing-in-apples-mobile-safari/

基本的に、あなたを追加

margin-bottom:-1px; 

ファントムラインボーダーが追加される要素に追加されます。

+5

ピクセル精度のレイアウトのためのひどい「解決策」 – ProblemsOfSumit

+0

モバイル上のグラデーションの背景にも最適なソリューション – yussan

3

のiOSズーム(多分補間に丸め誤差?)画像内の次の行からいくつかのデータを取るように見えます。私はいくつかのテストを行い、それは一貫した問題であるようです。私はAppleにバグとして報告しました。

画像に1行の背景色のピクセルを追加します(必要ならば1pxのパディング)。理想的ではないが働く。

おそらくSafari MobileのRendering borders bug in Safari mobileと同じ問題です。

0

これを上のブロックに追加すると、私にとってはうまくいきました。

margin-top:-1px; /* this overlap the blamed ghost line */ 
padding-top:1px; /* this gave me my pixel back =) */ 

あまりにも多くのブロックで起こっている場合は、代わりにクラスを作成する必要があります。

0

<div>が背景と同じ色でなく、白である場合、これは非常によく見えます。
形式のbackground-colorは、基本的には、<div>と同じ色である必要があります。そうしないと、線が表示されません。
background-color<div>と一致するように変更するか、<div>が座っている背景の領域をカバーするタイルを作成します。

2

彼らはあなたが私の問題を解決しました試してみてください余分なものがある私にとってはなかったとして、上記の答えはあなたのために動作しない場合:

border-bottom: 1px transparent solid ; 
margin-bottom: -1px ; /* for Mobile Safari dark line artifact */ 

が国境に透明の境界線を追加します下には、私の推論は、それがまだ国境をレンダリングしようとしていて、それが透明であっても、それらのピクセルを再レンダリングするように強制しているということです。それはしかし、純粋な推測ですが、解決策は動作するようです!

1

これはバックグラウンドカラーによってトリガーされるので、同じ背景色の1ピクセルのgif bgイメージを使用して繰り返してください。ミドル:

.touch .class-of-td { background: transparent url(../_img/services/1px-bgfix.gif) repeat; }

これはまた、垂直整列を取得するには、テーブルのセルを表示している要素のために働く:あなたはこのような何かを書くことができますmodernizr使用している場合。

0

デスクトップのブラウザとiPadとiPhoneで同じ問題が発生していました。 "背景色を:" 削除

html,body { 

background:url(images/bg.jpg); 
height:100%; 
text-align:center; 
text-decoration:none; 
width:auto; 

} 

:私のすべてのサイトでこの問題を修正しました私の新しいCSS

html,body { 

background:url(images/bg.jpg); 
height:100%; 
    background-color:#E8E8E8; 
text-align:center; 
text-decoration:none; 
width:auto; 

} 

:ここ

は私の古いCSSました。

0

私はヘッダーバーの下部に灰色がかったライン(のみ計算された)であったとしてそれを修正:

position:relative; 
z-index:2; 

直接ヘッダ容器に添加しました。おそらく誰かを助けるかもしれない おそらく。

0

私の特定のケースでは、問題のあるdivはmargin:-1pxまたはborder tricksで修正されませんでした。 私はdiv要素を持っていた:

height: 0px; 
padding-bottom: 57.2%; 

- パディングトップ/ボトムの幅からの割合を導き出すため、これは、異なる幅でその比率を維持する要素を作成するためのトリックです。でも、それは私も変更されたスタイルで、問題のページのリフレッシュを発見したことは注目に値する、行を削除しませんでした:

height: 1px; 
padding-bottom: 57.2%; 

重要:私の場合、私は、これを変更することにより、それを修正することができました私は体を隠したとき*。彼らが戻ってくるたびに回線を削除するには、デバイスを再起動する必要がありました。

  • (ボディ{表示:なし}証拠を改ざんではない、である)
0

私も自分のホーム・ページで同じ問題を抱えていたし、これらのソリューションのどれも私のために働いていません。私の特別なケースでは、ジョニー・アップ・トップが言っていたように、divレイヤーの間に現れたのはバックグラウンドでした。私は別のdivと既存のレイヤーをラップして終了し、2つの既存のレイヤーと同じ背景色にし、線はもう見えませんでした。それ以外のものがうまく動作しない場合は試してみてください。

0

iPadのフルページiframeの下に白い線が表示されていたので、高さを100.5%に設定してこの問題を解決しました。

関連する問題