Welcome, Old Sport!

hack background attachment fixed在移动端的问题

by ilikecss ON 2016/07/26 1002

解决background attachment fixed在移动设备中的bug方法Background attachment定义用户滚动页面时背景图片会发生什么。它有三个可能值:scroll, fixed and inherit.
如果你设置值为fixed,那么当你向下滚动页面时,内容向下滚动了,而背景不会跟着滚动。但是,如果在移动端这个属性是有bug存在的,你同事设置Background-size: cover时,当你滚动页面,背景并没有被cover,滚动多出来的区域将是空白或background-color的颜色。

正确

background-attachment-fixed-org

错误

background-attachment-fixed-issue

需要注意的是,如果你使用chrome模拟移动测试,你不会看到这个bug。只能用实体机去测试。

经过调试后发现,问题就是处在Background attachment:fixed。网上搜索攻略,基本都是不正确的,后来还是在老外网上找到了修改方法。如下:


html {
    height: 100%;
    overflow-y: hidden;
}
body {
    box-sizing: border-box;
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
    overflow-y: scroll;
}

其实这个问题核心就是浏览器滚轴滚动后造成的高度差,在移动设备里并没有把高度填补。老外还特地写了js来hack这个bug。

1条评论
  1. #1

    金刚禅狮子吼说道:

    哦!




TOP