ios手机轻触几下屏幕出现白底的bug

场景：安卓和ios需要嵌套我的H5页面，其中html中设置了禁止缩放事件user-scalable=no，也设置成positiona:fixed,bottom:0固定页面，安卓手机上不会出现问题，但是在ios上会出现的问题是点击几下屏幕会出现白边

注意：不是一进来页面出现白边，是点击几下ios屏幕之后底部出现白边的bug，由于没有办法返现出来bug,索性自己画了一下，如下图：

20190129170210.png

后来查了查资料问了问大佬，提供了一个解决思路：

解决思路：禁止轻触事件，但是这种思路下会有一个bug就是所有的功能都没法点击了，所以思路就要改为：功能性的按钮设置成能点击，对于打卡按钮的样式中，添加pointer-events属性，而其他区域点击无效

首先需要介绍一下pointer-events属性是什么

pointer-events属性是一个指针属性，是用于控制在什么条件下特定的图形元素可以成为指针事件的目标。

pointer-events属性有很多值，但是对于浏览器来说，适用于HTML元素的只有三个值，其它的几个值都是针对SVG元素的

pointer-events: visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all| none | inherit ;

其中适用于html的只有all| none | inherit三个值，其他值适用于svg

pointer-events: all| none | inherit ;

auto：默认值，表示指针事件已启用；此时元素会响应指针事件，阻止这些事件在其下面的元素上触发。
none：表示在元素上禁用指针事件；此时该元素将不响应指针事件，但它下面的元素可以响应指针事件，就像元素不存在于它们之上一样。
inherit：表示该元素将从其父级继承其pointer-events值。

修改代码如下：

body{
    background:url("./assets/img/bg2.jpg") no-repeat;
    background-size:cover;
    width:100%;
    height:100%;
    position: fixed;   
    top:0px;
    bottom:0px;
    left:0;
    pointer-events: none;   //整个body页面禁止点击
}
.container {  
    position: absolute;
    top: 5%;
    left: 37%;
    width: 43%;  
    height: 40%;
    pointer-events: auto;   //打卡功能存放在这个container容器中，auto代表能够点击
    display: none;
}