固定背景img在iPad和iPhone上无法正常工作

我有一些关于ios（iPad/iPhone）上的Safari背景图像的问题。在普通浏览器上一切正常。图像应该是固定的并填满屏幕。固定背景img在iPad和iPhone上无法正常工作

在ios-safari上显示背景图像并保持固定在背面。然而，图像的高度以某种方式由内容高度设置。意思是，当页面上的内容很少时，图像显示正确，但当内容较长时，我只能看到背景图像的顶部（图像被拉伸但保持正确的比例）。
用于切换背景图像的js代码在ios-safari上不做任何事情。

这里是我的html

<html> 

<head> 
    Some head stuff 
</head> 

<body> 

    <div class="pagewrap"> 

     <header class="header"> 
      <div class="menu"> 
       Some header stuff 
      </div> 
     </header> 

      <div class="full-page-background fullheight"></div> 

     <div class="wrap"> 

      <div class="main"> 
       Some content 
      </div> 

     </div> 

     <aside class="sidebar"> 
      <nav class="mobnav"> 
       My mobile nav 
      </nav> 
     </aside> 

    </div> 

    <div class="custom-background"> 
     A placeholder for a custom background image 
    </div> 

</body> 

</html>

这里是。全页面背景的CSS

.full-page-background { 
    background: url(/Content/Vixen/img/background02.jpg); 
    background-repeat:no-repeat; 
    background-attachment:fixed; 
    background-position:top center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

    position: fixed; 
    width: 100%; 
    z-index: 1; 
}

这里是.fullheight的JS，以确保它填补了高度浏览器窗口。

$(document).ready(function() { 
    var bodyheight = window.innerHeight ? window.innerHeight:$(window).height(); 
    $(".fullheight").height(bodyheight); 
}); 

// for the window resize 
$(window).resize(function() { 
    var bodyheight = window.innerHeight ? window.innerHeight:$(window).height(); 
    $(".fullheight").height(bodyheight); 
});

这里是.custom背景js的 - 如果在div（通过放置在CMS用户）一个图像将其切换为新的一个的默认图像。在桌面上运行良好，但对ios-safari没有任何帮助。

$(".background-image").each(function() { 
    imgsrc = this.src; 

    $('.full-page-background').css({ 
     background:'url(' + imgsrc +') no-repeat fixed center center/cover transparent' 
    }); 
});

来源

2013-06-30 Leopold Kristjansson