Mysterious horizontal lines on my site when rendered on iPad

Question

The following site:

http://staging.jungledragon.com

Has a few rendering issues on the iPad using Safari, so I\'m trying to fix them. There is one issue where I a

Answer 1

cheers, I had the same but on Andriods and using the background-image:100% 460px; helped solve mine :)

Answer 2

Did you try a css reset? If not try adding one it could be something standard for mobile devices to see if it still exists if it does check it out in firebug to see exactly what it is

Answer 3

An alternative is to specify the size of the background. This can be done with the css selector "background-size".

If your background image is 40 pixels high, the following code will prevent horizontal lines from showing up on the iPad: { background-size: 100% 40px }

Answer 4

Over-sizing your background images manually or using CSS3 should almost always work, as Damien and namsral pointed out.

However, sometimes this will not solve the problem in cases where your background image is anchored at a certain position. For example, if your background image is anchored to the bottom of your div, and the line appears at the bottom of this div, then you should shift the background image lower [than the bottom] by a certain amount, depending on the height of your div. For example:

background-postion: center 100.1%;

Answer 5

The background image I was using stops mid way through the content div and then the background of the container element is supposed to display.

Because the iPad zooms into the outermost div, the relevant background applied to the html tag isn't displayed. It seems that iPad doesn't like it when a fallback background color is not defined, so I had to add some iPad-specific CSS using a media query:

html { background:#ffffff url("images/bg-html.png") center top repeat-x; }
html#inside-html { background:#ffffff url("images/inside-bg-html.png") center top repeat-x; }

body { 
    background:transparent url("images/bg-body.jpg") center top no-repeat;
    text-align:center; 
    font:12px Helvetica, Arial, Verdana, sans-serif;
    line-height: 20px;
    color:#000;
    min-width: 980px;
}

body#inside { background: transparent url("images/inside-bg-body.jpg") center top no-repeat; }

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    body {
        background: #fff url("images/bg-body.jpg") center top no-repeat;
    }

    body#inside {
        background: #fff url("images/inside-bg-body.jpg") center top no-repeat;
    }
}

Answer 6

The issue's have to do with the way Mobile Safari handles background images. The green line that pops up (just inside your content area) is from another element.

Try 'over sizing' your images. For instance: A image gets cut off at 100 pixel height, make that image 110 pixels high. This works for me... most of the time.

Edit: I did check the site on my iPad and I just saw that single line popping up. Also note that it disappears when you zoom in/out which tells me it's a rendering bug (not something in your css).