Search done. Nothing in the archives like this. I've screwed up a previously working site. I know not how. Specifically, rotating my iPhone 6 from portrait to landscape displays my site narrowed to about 50%. Reloading pops it out to normal presentation. Rotating back to portrait, and then returning to landscape, requires another reload. Never had a problem where all viewports work yet a kick in the ass required after a rotation. Site is CodeStruggle dot com. I have the small and medium backgrounds set to tan and pink for trouble shooting. Thank you for any help.
Found the problem. For some reason my horizontal rule would not work. So I substituted the creature below until I could investigate the <hr> problem. Everything performed perfectly on desktop, but not on my phone. Live and learn.
<p class='fake-horizontal-rule'>_________________________________________________________</p>
p.fake-horizontal-rule{
color:#ccc;
text-align:center;
}
Related
I am about to launch a new Joomla site, and the only minor bug holding me up (not really effecting launch, just annoying) is this strange issue with iPhone (using Safari Mobile). You can see it in the image attached or use http://synthphone.com/ to see it.
Any ideas? I haven't noticed any other issue on any other browser or device. Link to the page is http://www.complisolutions.com/services.
Thanks for any assistance!
It's most likely a font size issue - note the word 'environmental' - looks to me like that cannot fit in the space allocated between the image and the left side of the screen.
Try remove that word to see if this is the case.
What you'll want to do, is use media queries to firstly make that image full page width at small screen resolutions and secondly to remove the float.
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).
I have a question regarding responsive desing on tablets:
The goal is to have 2 or 3 divs below each other, 100% height so they look like full-screen pages. When visiting my responsive website (work in progress) on an iPad everything looks fine. But as soon as you turn the device, some unnecessary margins start to appear and the device will zoom in on the content.
My question:
Is this normal, or did I miss a few lines of code?
Edit: forgot to add the site http://www.danielsneijers.com/
This is a known bug with iOS and there is a workround available: http://filamentgroup.com/lab/a_fix_for_the_ios_orientationchange_zoom_bug/
Wilst setting a maximum scale in the viewport will get round this, it also disables zooming on all devices which is very bad for accessibility and means your website is more likely to have issues with future devices.
Really not sure why this is occuring but with some systems the backround image gradient appears choppy and only half of it even appears, also some systems display the color so light is can barely even be seen especially those with lower resolution settings. Any ideas why this is occuring?
Here is the link to the page: http://www.kapacitive.com/Main_Page_Template.html I have it here just for testing purposes.
I also noticed that if I change the CSS positioning of the background to background-position:50% 50%; the issue of only having half the backround appear occurs on my main system.
I have a small touch screen Garmin device that has a web browser and with that device the background appears both choppy and only half appears, though I really didn't expect much from that device in the first place.
My secondary machine has a lower resolution display and with that system the background can barely be seen. This also occurs using an entirely different machine and display which has a lower resolution setting.
Maybe, I should just trash the background all together with all these damn bugs occuring, though in my opinion it does look better with the background.
If anyone wants to volunteer test the page using other devices and provide the results that would also be cool, I currently do not own any Apple devices.
Like I've stated any suggestions or ideas on resolving this issue would be great and even any insight about why this is occuring. I realize each machine is different but the differences in how this page is rendering between different machines is way too drastic in my opinion to be acceptable for deployment.
I believe the problem is with the color-depth of the machines viewing the background image. That nicely faded gradient relies on a LOT of colors, and on a screen with a limited palette, it's going to be choppy.
A work around would be to test the pixelDepth/colorDepth of visitors' screens, and to dynamically change the background image to something plainer if it is too low. Most browsers provide that information [via JavaScript] in the screen variable.
window.screen.colorDepth
window.screen.pixelDepth
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.