CSS-фоновое изображение отрисовывается по-разному на iPhone

У нас есть дизайн страницы, который отлично работает в каждом браузере для ПК, который я пробовал, но выглядит странно при просмотре на iPhone или iPod Touch.

проблема связана с очень высоким центрированным фоновым изображением:

#content_container
{

background-image:url('content-background.jpg');
background-position:top center;
background-repeat:no-repeat;
width:1020px;
height:auto;
}

Изображение content-background.jpg очень высокое (3000 пикселей) и предназначено для «раскрытия» в качестве DIV. в растет за счет содержания.

Вам нужно будет взглянуть на страницу и полный CSS, чтобы понять, поэтому я убрал все остальное из дизайна и воспроизвел проблему в следующем примере:

http: //files.codeulike. com / static / cssexample / example.htm
(пример состоит из 1 файла html, 1 файла css и 3 изображений)

Вы увидите, что в IE8, Firefox, Chrome вы получите красивую зеленую рамку . Но в браузере iOS длинное тонкое фоновое изображение масштабируется, и все идет странно.

(Я использую iPod Touch 2-го поколения, но предполагаю, что такая же проблема будет и с другими iPhone / iPod touch).

Любая помощь очень ценится!