Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Mysterious horizontal lines on my site when rendered on iPad

Tags:

css

safari

ipad

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 am stuck though. If you have an iPad, open the site in portrait mode. There are two unwanted horizontal lines appearing, a top one that crosses the tabs (Popular, Fresh, etc) and a bottom one that sits right above the lizard illustration. Both lines should not be there.

These lines do not appear on any other browser tested, including Safari on Windows. When you move that same site into landscape mode on the iPad, the top horizontal line dissapears, whilst the bottom one stays. If you zoom in a bit to the bottom line, it then dissapears too.

I've been trying out various CSS fixes to no avail and am now beginning to think this is a rendering issue of Safari, although possibly triggered by me.

Any help is greatly appreciated. It seems like a minor issue but I hate sloppiness.

like image 637
Fer Avatar asked Nov 19 '10 13:11

Fer


People also ask

Why are there horizontal lines on my iPad screen?

There is a common issue with the device getting moisture trapped inside the screen. This can cause the display screen to produce wavy lines, or dim pixels.

How do I get rid of lines on my iPad screen?

If you have reduced the brightness and turned off the Auto-Brightness but still face the iPad screen has white lines, you have to turn off the 'Motion and Transparency' feature.

Why does my iPhone have horizontal lines on the screen?

Most of the time, lines on your iPhone screen is the result of a hardware problem. It can occur when you drop your iPhone on a hard surface, or if your iPhone gets exposed to liquids.

How do I get rid of the horizontal line on my iPhone screen?

If the lines appear only in a certain app, then double tap your "Home" button and swipe up across the app to quit out of the process. If the issue persists, do a hard reset by holding the "Home" and Sleep/Wake buttons simultaneously until the Apple logo shows.


3 Answers

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).

like image 63
Damien Avatar answered Oct 01 '22 23:10

Damien


Oops - how did that happen?

The meta to go in the head tag to to stop zooming on the iPad:

<meta name="viewport" content="initial-scale=1, maximum-scale=1">
like image 31
nev Avatar answered Oct 02 '22 00:10

nev


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 }

like image 44
Lars Wiegman Avatar answered Oct 02 '22 00:10

Lars Wiegman