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.
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.
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.
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).
Related
I am trying to fix an image to a certain point in the background image for a project.
I've created a jsbin as I couldn't find the words to explain what I'm trying to accomplish.
http://jsbin.com/esUNEKIM/2/
In the example, the little map pointer is perfectly placed at the tip of the finger in the background image (at my resolution and full screen), but moves when the image scales down.
Any clues?
PS: I need the two images to be separate. I'm open to hacks as this will be a temporary landing page and we don't really care about old IE compatibility here.
Thanks!
Edit: I see it now when I shrink my browser vertically - you'll need to add in vertical media queries (e.g.: http://cognition.happycog.com/article/go-vertical/) or use JavaScript.
I actually didn't see it move when it scaled-down but when it scaled up. For me, 230px seems to work until a given point (around 1600px). Use a media-query to change the right position. It looks to me like 16% seems to work after that point.
#media screen and (min-width: 1600px){
#capsule {
right: 16%;
}
}
If you're still seeing it on scale-down, you can add multiple media-queries to adjust the position.
I have very strange situation and I really can't see why ... and how to overcome that.
So I have to place the backgroung image on web site of size 1920x860.
The image ends differently - like: if it is not extended over the whole window, the corners of the image looks strange.
When I tested this in FF, it does not look ok. I tested this on 22'' monitor (thus resolution 1680x ..).
when I test this in Chrome, the image extends good, the corners of the image are not seen.
BUT: I have two monitors, the second is 23'', thus the resolution is not much different of the first one and if I test this page on Crome, is ok, on FF also.
Then I used firebug tool and try to get the innerWidth of the window.
The 22'' monitor has innerWidth 2124px, the 23'' monitor has 1776px.
I would really appreciate if someone can tell me - why this is happening? If someone could have an idea how to place this image to let it extend well on every monitor ... would be even better.
The point is - that I have to extend image from corner to corner and while testing on my monitors, I cannot be sure that other users will see this as I can see :(
Thanks.
I'll make the comments here ... as all of you are so kind I just tried many different solutions. the point is that the image is not cover for whole background - should be seen and at the bottom should just have some color ...
Now I'm using simple background: url() no-repeat top center ..
if I use -cover- the image is extended - but I needed to extended only vertically. I used JS as well, but is not working ok, as the footer is a part of that bg-image ... and become all wired.
Maybe, I'll just use #media .. to set bigger image for bigger screens (and of course will use bigger image) but also this will work only for a bit bigger screens, if not the design will crash, I think.
Let me google that for you (first result for 'css window background'):
http://css-tricks.com/perfect-full-page-background-image/
In a nutshell:
html {
background: url(bg.jpg) no-repeat center center fixed;
background-size: cover;
}
See also: http://caniuse.com/#search=background-size
I'm wondering if this is something somewhat simple, but I'm having a problem ONLY on iPad with my sprited images. I have an tag that I use a sprite for to display an image of a star (similar to gmail or picasa) to indicate a favorite. On every other browser (including safari) on a computer, it's all completely fine.
The problem is on an iPad, it's showing more of the sprite than it should and it looks strange. What's even stranger is that this image is repeated several times and it doesn't seem to happen consistently.
Is this some sort of zoom issue or viewport setting problem specifically for iPad? It's driving me crazy, and anything I do to fix it cuts off some of the image and ruins the normal browser look.
Here's an example of what I mean since I can't put up the page I'm currently working on.
On this site I've worked on in the past, the viewing options look strange on an iPad:
http://demo.qlikview.com/index.aspx?section=Life
For example the "Download" viewing option looks different on the FEMA app than on the Kick It app so it doesn't even appear to be consistent.
Any help would be appreciated.
Thanks!
This is because the iPad scales your page.
The size of your element where the sprite is used is scaled and the sprite image to. But it seems not to behave precisely.
The same thing happens when you zoom out in safari. This is because an image is not scaled the same way in the browser then a dom element. A dom element is rendered as vector object. So when you zoom in or out, the lines keep sharp. When you do the same with a bitmap. It gets blurry and the browser need to guess how the image would look like smaller or bigger.
You have two options:
use more space between the sprites.
use EMs and not Pixels in your CSS
PS: Don't use !important in your css
Like meo pointed out, best option would be to leave space between the sprites.
There is also one last thing you can do, which is not to let the user zoom the web page by putting the following line in your tag. It would look the exact same as you view in the browser, which is pretty neat if you have loads of elements messed up in the iPad because of the sprite issue.
<meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0" />
Good luck!
The simplest fix for this is to put an outline around your spite with the border color the same as the parent container's background color. The outline is outside you element and does not effect layout. What you see is a problem mobile Webkit has when it scales down images with background color or background images, they bleed out of their container. The outline will sit on top of that and cover it.
What I usually do is just define separate images (non-sprited) for iPad users. I know it doesn't load as quickly as you're hoping for with sprited images, but I feel it's a price they have to pay. What I do is have individual images on the server with #media in your stylesheet to define different images for iPad browsers. A quick review of how to use #media for iPad can be found at:
http://css-tricks.com/snippets/css/ipad-specific-css/
I just ran into this problem as well. I've been leaving extra space between my sprites since I first noticed the iPad imperfections. However, my current project involved sprites and another element with CSS3 transforms. The combination made the sprites blurry, with strange clipping around the edges. I actually found a fix over at No more jagged edges in iOS. Try applying the following CSS to your sprites:
/* IOS fix for incorrectly scaled sprites */
-webkit-background-clip:padding-box;
background-clip:padding-box;
Those few lines worked magic in my project. Of course, YMMV.
I have a conceptual question about photo galleries like this:
http://www.nikesh.me/demo/image-hover.html
If you open this in a browser that supports CSS Transitions (for example Chrome), it will smoothly scale the hovered image whilst the zoomed version remains of a high quality.
This is accomplished by showing the non-zoomed images into a slightly smaller version than they really are, in essence the zoom shows them in their true dimensions.
So, normal images are first scaled down:
-webkit-transform:scale(0.8);
And then upon hover scaled up:
-webkit-transform:scale(1.2);
My question: How is the initial scaling down supposed to work for browsers that do not support this method of scaling down? Try opening that gallery in IE to see what I mean, it shows the images not scaled down, which makes them too large and thereby they break the layout.
What I want:
The full effect in browsers that support it. Important is that the zoomed version remains quality.
No effect at all for browsers that do not support it, yet a solid original dimension so that no layout is broken
It should work for both image orientations and there may be variety in image widths and heights too
Anyone? Preferably an elegant solution that does not need browser sniffing or javascript, but all answers are welcome.
If you are wanting it to work without the use of javascript then it seems the only method you have is to forgo the initial scale down with css. You will want to do this in the "antiquated" way of adjusting the width and height of the image in the markup.
<img src="yourImageSrc" width="80%" height="80%">
This would allow you to still keep your layout in tact if the user agent is not up to date.
** I don't know if the percentage works in the literal height/width definition. But you can always figure out the ratio you need and plug it in.
Specifically, how do I predict/calculate the effect any of the browsers' zoom will have, for example, on width:950px? Are there any tools I can use to determine the new widths?
edit:
If I have a 950px div that is visually rendered 875px in, say, chrome, I could say chrome reduces fixed widths by approx. 92.1% after one crtl-. (950*.921= approx .875).
Try Firebug
Its an excellent plugin for Firefox, which lets you view variety of parameters.
You could play around with it and it would probably solve your problem.