Horizontal line on div in iOS

http://solentnightz.clients.rla.co.uk/index.php

On the above page, the footer div at the bottom shows a horizontal line at the top in iOS

I know this is probably and sizing rendering issue, but wondered if there was a fix?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I have seen these from time to time, and have never figured out why they happen. I think it’s a MoblieSafari thing. Try looking at it in Chrome or Opera on iOS to be sure. (If you see it in Chrome but not Opera, then it’s probably a WebKit thing.

Walter

On Dec 15, 2012, at 10:06 AM, BigG wrote:

http://solentnightz.clients.rla.co.uk/index.php

On the above page, the footer div at the bottom shows a horizontal line at the top in iOS

I know this is probably and sizing rendering issue, but wondered if there was a fix?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There is a fix, of sorts. It’s a known issue with the iOS scaling algorithm, often with background images in portrait orientation. I’ve successfully used a hack but I need to look for it as I haven’t used it in some time.

Todd

http://solentnightz.clients.rla.co.uk/index.php

On the above page, the footer div at the bottom shows a horizontal line at the top in iOS

I know this is probably and sizing rendering issue, but wondered if there was a fix?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Shows in chrome but not in opera so must be a WebKit glitch. Client has asked for it to be removed so will just have to say its a glitch.

Opera doesn’t render the page very well at all - it does like the jquery I’ve used, and the blue footer doesn’t stay anchored to the bottom of the page. Grrr


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Fun fact about Opera mini: the “browser” basically requests a screenshot of the page from a central Opera server, and shows you that instead of rendering the page on your iOS device.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ah thanks Walter for that - great.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’ve noticed this before. It’s where for example two divs but up together and there a small gap where a white/dark background leaks through. One fix I’ve found is to make sure the background colours match the foreground where possible.

I assume its where the pixels decide to lie when scaling up/down.

David

On 15 Dec 2012, at 15:10, Walter Lee Davis email@hidden wrote:

I have seen these from time to time, and have never figured out why they happen. I think it’s a MoblieSafari thing. Try looking at it in Chrome or Opera on iOS to be sure. (If you see it in Chrome but not Opera, then it’s probably a WebKit thing.

Walter

On Dec 15, 2012, at 10:06 AM, BigG wrote:

http://solentnightz.clients.rla.co.uk/index.php

On the above page, the footer div at the bottom shows a horizontal line at the top in iOS

I know this is probably and sizing rendering issue, but wondered if there was a fix?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Here’s the fix I mentioned earlier, though there may be better solutions.

-webkit-background-size: 100px 100px

The idea being you use a slightly taller image than actually needed to fill in the gap created by the scaling problem. Obviously you need to change the above dimensions to suit your needs. I used this successfully in an @media query to target whatever device/orientation necessary though that may not be strictly necessary to get the desired effect.

I also heard iOS 6 might have fixed this rendering problem.

Todd

There is a fix, of sorts. It’s a known issue with the iOS scaling algorithm, often with background images in portrait orientation. I’ve successfully used a hack but I need to look for it as I haven’t used it in some time.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options