【css】移动端兼容 天坑！ios竟然不支持fixed

在一个长页面，弹了个窗，用position: fixed加了黑色半透明蒙版和弹窗内容，在ios手机上蒙版楞是不能全屏显示。好死不死，安卓机上都是全屏显示的

像是使用了position: absolute而不是position: fixed

.dialog {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

body {
    -webkit-overflow-scrolling: touch; // ios顺滑
    height: 100%;
    overflow-y: scroll;
}

原来是ios的顺滑体验-webkit-overflow-scrolling影响了position: fixed

弹窗弹起时，父级设置如下属性：
position: fixed 使弹窗底部不再滚动
height: auto 长页面不能固定高度，否则底部依然滚动（andoid）
-webkit-overflow-scrolling: unset 清除-webkit-overflow-scrolling属性，方式影响ios的position: fixed
同时兼容ios与android可尝试用以上三个属性与overflow: hidden 组合使用

js事项如下

// js方法
if(dialogShow) {
    $('body').css({
        'position': 'fixed',
        'height': 'auto',
        // 'overflow': 'hidden',
        '-webkit-overflow-scrolling': 'unset'
    });
} else {
    $('body').css({
        'position': 'relative',
        'height': '100%',
        // 'overflow': 'auto'
        '-webkit-overflow-scrolling': 'touch'
    });
}

css实现如下：

// css方法
body {
    -webkit-overflow-scrolling: touch; // ios顺滑
    height: 100%;
    overflow-y: scroll;
}

//  弹窗弹起
body.active {
	position: fixed;
	height: auto;
	// overflow: hidden;
	-webkit-overflow-scrolling: unset
}

参考链接：偏前端 - ios下position:fixed失效的问题解决