ウェブサイトのフッターがモバイル ブラウザで 1 ピクセルずれて表示されますが、その理由は不明です。
これは、iPad での表示のスクリーン ショットです。フッターの上部にある 1 ピクセルの緑色の線は、デスクトップ ブラウザーには表示されません。モバイル ブラウザーでのみ表示されます (iPhone と iPad の Chrome と Safari でテスト済み)。
これを自分の目で確認したい場合は、www.panabee.comにアクセスしてください。
なぜこれが起こっているのか誰でも説明できますか？
ありがとう！
これはファンキーな問題です。ズーム レベルによって見え方が異なります。
#page_box の最後の div を次のスタイルに変更します。
#all_icons {
margin: 60px auto 54px auto
}
これで iPad のデフォルトのズーム レベルで問題が解決しました。
ただし、さまざまなズームレベルで戻ってくるのを見ています。その画像を透明なピクセルと交換して、消えるかどうかを確認します。そのイメージと関係があると思います。
修正は次のとおりです。
#footer_top {
background: transparent url(/images/footer_header.png);
height: 72px;
position: relative;
background-position-y: -1px;
}
背景が繰り返されているという事実に関係していますが、奇妙なことに、repeat-x を追加しても、下のピクセルが上に繰り返されているように見えるため、修正されません。画像の端で似たようなものに出くわしました。これは、webkit が画像の端で補間を行う方法に誤りがあると思います。いずれにせよ、私が行ったのは上部のピクセルを非表示にすることだけですが、下部に沿って単一の繰り返し透明ピクセルを配置すると、問題が解決する場合があります (私の他のプロジェクトではそうではありませんでしたが)。
I can see the issue on my iPhone 4S running iOS 6.1.3, it does disappear when I zoom in. But I can also reproduce the issue using Google Chrome Version 26.0.1410.64 m. When I zoom in to anywhere above 110% (obviously it is easier to spot at even higher zoom levels) I can see a green line appear for just a little while, which then disappears as the image becomes sharper within a few seconds. At 300% the line doesn't disappear anymore, it will always be visible, and at the same time the image does not become sharper anymore, but then at even higher zoom levels, the line is never there.
Seeing the image becoming sharper and then seeing the line disappear is leading me to believe that the problem might be with the image being saved as an interlaced image. Obviously you might have done this on purpose, as it is not really a bad thing. And in that case you would also know that interlacing an image enables it to be shown as a degraded copy of itself while it has only partially been received by its intended recipient (in this case a visitor on your website).
Now I have never heard of any issues with interlaced images in mobile safari, but doing a Google search did turn up some results. Including a result to a question with some useful answers here on SO. Problems seem to have started with the iOS 6 update. Most problems seem to be fixed by either turning off transparency on the image or by saving the image with the interlacing option turned off.
So I'd suggest you try those options and see if that fixes it. Or if you really need interlacing, maybe use a different image format which supports interlacing (browsers may handle it differently between formats?).
What I find quite interesting is that it seems like Google Chrome doesn't use interlacing on higher zoom levels, I guess it doesn't make sense to try to get the image to be even sharper when you're zoomed in that much already?
I would find it interesting to read some documentation on how different browsers handle interlacing for the different formats which support it. I couldn't really find any (but I didn't have a very good look). It might shed some light on why some issues have started to appear in iOS 6 and higher, to me it looks like mobile safari on iOS 6 does not support interlacing PNG images at all, and since I could reproduce the issue in Chrome, I thought that it might be an issue with WebKit based browsers across the board, but my Safari 5.1.7 does do the right thing on all zoom levels.
Anyway, I hope one of the suggestions will solve your problem.
これは、Web ページがスケーリングされた結果としての丸め誤差のように見えます。
ページにビューポート メタタグを設定していない場合、向きに関係なく、デフォルトのビューポート幅は 980 ピクセルに設定されます。これは、デバイスの幅が 768 ピクセルの横向きの場合、ページを約 78% に縮小する必要があることを意味します。
ページのデザインが、さまざまなパーツがピクセル単位の精度で整列されていることに依存している場合、これは失敗することがあります。新しいバージョンの webkit は、最近 subpixel layout units に移行したため、この種のことをより適切に処理できると期待していますが、それが常に役立つとは限りません。
これが問題であると仮定すると、次のようにビューポート メタタグをページに追加することで修正できるはずです。
<meta name="viewport" content="width=device-width">
次に、メディア クエリを使用してレイアウトを調整し、さまざまなデバイスの幅をより適切に処理する必要があります。これは、ブラウザーがページをスケーリングすることに頼ることができなくなるためです。
ただし、一部のモバイル デバイスではデバイス ピクセル比が整数ではない場合があるため、CSS ピクセルが必ずしも正確なデバイス ピクセルに変換されるとは限りません。ただし、デバイスのピクセル比が 1 または 2 であるため (Retina ディスプレイを使用しているかどうかによって異なります)、少なくとも iPad での問題は解決するはずです。
メディア クエリが手間がかかりすぎるように思われる場合は、1#footer_topピクセル下に移動することをお勧めしますが、既にそれを行っているようです。それは役に立ちませんでしたか？
私の iPad では問題を再現できません (おそらく、既に何かを調整している可能性があります) background-origin: border-box;。