Question

目前正在建立一个新博客并在ipad上遇到固定封面背景问题 - 在浏览器上工作正常但在iPad上滚动，尝试了很多方面，包括创建一个单独的背景div，其位置为：fixed z-index：-1;这产生了同样的效果。

我不确定为什么会发生这种情况，因为我认为这个位置：固定和背景附件：固定是否要在iOS5中排序？

您可以在此处查看：http://reactionproductions.com/tumblr/

Answer 1

您可以尝试通过

在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 2

在寻找解决方案的几天之后，这里是：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 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)";
};

解决了ipad（iOS5）背景问题

3 个答案: