手机web页面适配的那些坑

缘起

最近微信iOS客户端将于2017年3月1日前逐步升级为WKWebview内核

为了检查现在的服务号的页面是否适配新内核，小伙伴们找啊找，还真找到了一个页面的bug。

Paste_Image.png

这个问题呢，是这样的：

当前的页面需要进行浮框的内容提示，而在浮框的上一层，当然要有个半透明的div遮盖住原有的页面，使其原有页面不能点击。

这时问题就来了！！

当你用手指按着这个半透明的遮盖层，原有页面莫名其妙就会出现一条横线。

修bug中

一开始的思路感觉应该是样式的问题。（因为只有出现了这个半透明的遮盖层才会出现嘛）

原来是使用：

opacity:0.4;

来进行半透明处理的，那就修改使用半透明png作背景。

结果失败。。。
那应该不是遮盖层的样式问题了吧。。。

修bug2

然后发现这条线和底层页面有内容的dom结构高度是一致的，不论给底层的dom加高度，或者加padding、margin，都能将线移动。

这时就想是不是outline的问题

然后就将所有的div都加上

div:focus {outline: 0;}

结果还是失败。。。

解决

最后想到这个是由于按住遮盖层，然后冒泡到底层页面去了，那我就不让它冒泡就好了

$(".masking").touchstart(function(event){
event.stopPropagation();
});

这样还不行，因为event.stopPropagation() 只是阻止事件往上冒泡，不阻止事件本身。

那阻止事件往上冒泡，同时还阻止事件本身就好了嘛。

$(".masking").touchstart(function(event){
return false;
});

解决！！！皆大欢喜

————
前端·小h
纸上得来终觉浅，绝知此事要躬行