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延迟渲染,果然好了。