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

【问题标题】：Fixed background issue on ipad (iOS5)修复了 ipad (iOS5) 上的后台问题
【发布时间】：2012-08-06 15:42:11
【问题描述】：

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

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

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

【问题讨论】：

标签： ipad html ios5 css webkit

【解决方案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;
}

【讨论】：

【解决方案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 设备。希望有帮助。

【讨论】：

之前已经尝试过这个，我能得到的唯一结果是背景覆盖了包括滚动在内的整个 100% 的内容（因此拉伸到 4000 像素高）。奇怪的是我的左侧面板（徽标/描述）也被定位为固定并且继续在 iPad 上滚动
你可以试试：background-repeat: no-repeat;背景大小：包含；。也可以使用 safari -webkit-background-clip: padding-box;我能想到的另一种解决方案是创建一个带有标题宽度的 div 和其他具有左侧菜单宽度和高度的 div 以及一个具有内容宽度和高度的 div 和放置在内容中并使用 scroll-y 滚动它，这样效果 divs(header,leftmenu,content) 将是固定的......只是抛出想法，希望你找到解决方案，

【解决方案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)";
};

【讨论】：