/ css

background attachment fixed not working on mobile devices

我尝试把我的网页在移动设备上浏览时发现了一个问题,我给 body 加了一张背景图片并且固定,使其不受鼠标滚轮的影响。在桌面端的浏览器运行完美。

body {
    background: #222 no-repeat fixed top;
    padding: 0;
    margin: 0;
    font-family: "lustria", serif;
    font-size: 24px;
    background-size: cover;
}

在桌面浏览器的响应式模拟中也是正常工作的。
然而直接用手机或者 iPad 打开就出现了问题:背景图不再以 cover 的样式拉伸,而且背景随着滑动滚动。在 Android 或者 Windows Phone 设备上显示也是不正常的,要么不加载背景,或者 css 中的 background-size:cover 不生效。
在 stackoverflow 上找到了几个类似的问题,有人提到原因是对于移动端设备来说固定背景会消耗大量的重绘成本和滚动性能,于是手机端就默认让他直接滚了……

所以说这不是一个 bug ?

附上解决的方法:

    background-attachment:scroll;
    background position:left top;
    background-size:cover;
$(window).scroll(function() {
  var scrolledY = $(window).scrollTop();
  $('body').css('background-position', 'left ' + ((scrolledY)) + 'px');
});

这种方法就是用脚本在滚动的时候不断调整背景的位置。但是也引出了新的问题。就是因为位置的写死,背景图的 cover 不能很好的实现,无法根据屏幕尺寸正常地填充所有区域,就和某些安卓手机之前的表现一样,总之还是不对的。
我目前想到的方法是后台根据浏览器的可视区域自动返回裁剪好的背景图,因为背景图本身就是做成多张随机获取的。这也是要实现的功能。至于裁剪和转化,准备通过阿里云或腾讯云的万象优图来实现。

具体的实现还没做,待续……

参考

How to replicate background-attachment fixed on iOS duplicate