The footer on our website is displaced by 1px on mobile browsers, and we don't understand why.
Here's a screen shot of what it looks like on the iPad. The 1px green line at the top of the footer doesn't appear in desktop browsers -- only on mobile ones (tested on iPhone & iPad Chrome and Safari).
If you would like to see this for yourself, visit www.panabee.com.
Can anyone explain why this is happening?
Thanks!
This is a funky problem. I see it differently on different zoom levels.
Change the last div in #page_box to the following style:
#all_icons {
margin: 60px auto 54px auto
}
And that fixes it for me on iPad at default zoom level.
However, I am seeing it come back at different zoom levels. I'd try swapping out that image with a transparent pixel to see if it goes away. I suspect it is something to do with that image.
This looks to me like a rounding error as a result of your web page being scaled.
If you haven't set a viewport metatag on your page, the default viewport width is set to 980 pixels, regardless of orientation. This means that in landscape orientation, when the device width is 768 pixels, the page has to be scaled down to around 78%.
If your page design relies on various parts being aligned with pixel perfect precision, this is bound to fail from time to time. I would expect newer versions of webkit to deal with this sort of thing better, since they recently moved to subpixel layout units, but that won't always help.
Assuming this is the problem, you should be able to fix it by adding a viewport metatag to your page like this:
<meta name="viewport" content="width=device-width">
You would then need to use media queries to adjust your layout to better handle different device widths, since you can't rely on the browser scaling your pages for you anymore.
Even then, though, you can't guarantee that your css pixels necessarily translate to exact device pixels, since some mobile devices may have non-integer device pixel ratios. It should at least fix your problems on the iPad, though, since it has a device pixel ratio of either 1 or 2 (depending on whether you have a retina display or not).
If media queries seem like too much effort, I was going to suggest you just move your #footer_top down a pixel, but it looks like you've already done that. Has that not helped?
I cannot reproduce the problem on my iPad (perhaps you've tweaked something already) but I think you might solve this problem with background-origin: border-box; on #footer_top and #footer.
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.
Try changing your CSS for #footer_top to:
#footer_top{
background: transparent url(/images/footer_header.png) repeat-x center -1px;
height: 72px;
position: relative;
top: 1px;
}
Basically if you pull up the background image by 1px pixel and pull down the div panel by 1px, it should help fix the problem.
Here's the fix:
#footer_top {
background: transparent url(/images/footer_header.png);
height: 72px;
position: relative;
background-position-y: -1px;
}
It has to do with the fact that the backgound is repeating, although oddly enough adding repeat-x does not fix it as it appears to be a repeating the bottom pixel to the top. I've run across something similiar at the edges of images, and I think it's an error in the way webkit does interpolation at the edges of an image. In any rate, all I've done is hide the top pixel, but you might find that placing a single repeating transparent pixel along the bottom MAY fix your issue as well (although in my other project it did not).
