ipad - 修复了 ipad (iOS5) 上的后台问题

Question

目前正在建立一个新博客，并且在 ipad 上存在固定封面背景的问题 - 在浏览器上工作正常，但在 iPad 上滚动，尝试了很多事情，包括创建一个单独的背景 div 位置：固定 z-index：-1；这创造了同样的效果。

我不确定为什么会发生这种情况，因为我认为 position:fixed 和 background-attachment: fixed 应该在 iOS5 中排序？

你可以在这里查看：http ://reactionproductions.com/tumblr/

Answer 1

经过几天寻找解决方案，这里是：http ://ryanfait.com/resources/fixed-positioning-in-internet-explorer/

这就是我的工作方式：

* {
    margin: 0;
}
html, body {

    height: 100%;
    overflow: auto;
    overflow-y: scroll !important; 
}
#background_wrap {
    background: #000000 url(xxxxx.jpg); no-repeat center center fixed;
   -webkit-background-size: cover; 
   -moz-background-size: cover; 
   -o-background-size: cover; 
    background-size: cover; 
    background-position: center; 
   -webkit-overflow-scrolling: touch !important;  
    z-index: 0;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}

#page {
   -webkit-backface-visibility: hidden;

}
.box {
    position: fixed;
    left: 10px;
    top: 180px;
}
* html .box {
    position: absolute;
}

Answer 2

您可以尝试通过在 CSS 中进行选择

@media screen and (min-width: 1023px){
body {
    background: cover;/*etc*/
    width: 100%; 
    height: 100%; 
    position: absolute; 
  }
}

和玩耍。你也可以添加

@media screen and landscape and (min-width: 1023px)

并带有肖像，因此可以很好地获取 ipad 设备。希望能帮助到你。

Answer 3

你试过这个解决方案吗？将它放在窗口的 onScroll 事件处理程序中：

if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod')
{
    //set background fixed with javascript
    var element = document.getElementById('background');
    element.style.webkitTransform = "translate3d(0, " + window.pageYOffset + "px, 0)";
};