20141212

1.

MIUI6的坑，

首先是确定高度的，overflow-y:scroll;屏幕难以滚动的坑。

要对div设置position为absolute或者relative，才能快活地滚。

 

2.

在MIUI6浏览器里，

遮罩层被同级下层代码盖住。

那就遮罩层再下层，同时提高z-index。

 

3.

在MIUI6自带浏览器和IOS8的safari上，absolute的兄弟节点面积盖过自己，会出现渲染问题。

解决方法，先隐藏，再setTimout显示出来。

 

单单列出坑，以及直接说出解决方法没啥意思。

下面说下解决思路。

第一个坑，

首先是有的界面可以滚，偏偏那个坑不能滚。

于是，我就找滚和不能滚的差异在哪里。

发现，差异在能滚的div元素position是absolute或relative，不能滚的是static。

于是改之，可滚。

 

第二个坑，

其它浏览器都没问题，唯有MIUI6的浏览器出问题。

它被下面的兄弟元素给盖住，上面的兄弟元素可以被遮罩层盖住。而且居然改z-index也没用。

那么，我就把遮罩层的html代码放到最下面，坑填之。

 

第三个坑，

在chrome没有复现，MIUI6以下的版本也没有复现，但是IOS8的Safari和MIUI6有。

父元素是relative，一个子元素a是absolute，一个子元素b是static或relative。

b的面积撑满父元素，a在b的下面且层级比a高。

一开始父元素通过css3的位移屏幕看不到的地方，然后位移到能看到的地方，发现b盖住了a。

第一反应是渲染出问题了，那么用setTimeout延迟渲染，果然好了。