Unwanted "border" in iPad (background issue)

HTML & CSS
1

Hi

I have a column which has a background color from top to bottom. In the column there’s a header which has another background color specified. Simple, right?
Not so fast…

For some reason Safari on iPad does not set the background color to all the pixels of the header element. 1px (top, right, left) remain and get the background color of the underlying element (i.e. column). The weird thing is that if you zoom in – voila! – the border is no longer visible but as soon as you zoom out it comes right back. In other words: looks like this could be a rendering bug.

I’ve attached a testcase:


<!doctype html>
<html>
<head>
	<title>untitled</title>

	<style>
		.column {
			width: 200px;
			height: 600px;
			background-color: #575757;
		}
		.column .head {
			height: 50px;
			background-color: #fff;
		}
	</style>
</head>

<body>
	<div class="column">
		<div class="head">header</div>
		
		<div class="content">
			content
		</div>
		
		<div class="foot">footer</div>
	</div>
</body>
</html>

Is there a workaround for this behavior?

2

Have you reset all browser’s default styles using something like a reset stylesheet?

Sometimes there are default paddings and margins that don’t get caught until they start making things screwy.

I would also explicitly state width:100% on the .head element

3

I use Eric Meyer’s CSS Reset on site site but I forgot to include it in the testcase. I get the same result with or without it.
Also, setting width to 100% has no impact.

Any more suggestions? :slight_smile:

Edit:

The column element should be wrapped inside a container element which centers the page in the browser.

4

It’s hard to know what to say when most of us can’t test this. When I have troubles with background-color I usually try background instead, so worth a try. If all else fails, you could target the ipad on its own:

<link rel=“stylesheet” media=“only screen and (max-device-width: 1024px)” href=“/css/ipad.css” type=“text/css” />

5

There’s not a whole lot of information out there regarding the nerfed WebKit on iPad, I know, but I thought I’d ask here anyway.

When I was noticed about the problem I actually had an alpha-transparent background image but I’ve simplified it to something like the testcase. I’ve tried setting initial viewport scale, adding borders, using Css shorthands etc but so far nothing seems to help.

Perhaps the best choice would be to do a separate site after all.