移动端web兼容
ios:
1.dom渲染异常(渲染一半,或不渲染,但能响应事件)
这种情况很可能是添加了-webkit-overflow-scrolling:touch造成,
safari 在设置-webkit-overflow-scrolling:touch后,会采用“懒渲染”,所谓的“懒渲染“,指只渲染当前屏幕可见部分,超出屏幕的部分不渲染,当用户拖动屏幕,并且松开手指后,才会渲染被拖到屏幕范围的ui,所以,在拖动过程中,会看到空白的区域(在某些情况下,还会发生渲染异常的情况,如:某些dom只渲染了一部分,呈撕裂状)。
解决上述问题,可强制浏览器开启gpu渲染:-webkit-transform:translate3d(0,0,0);
如果全局都需要可使用(不推荐): *:not(html){
-webkit-transform:translate3d(0,0,0);
}
2.避免在flex:1的直接子元素中使用百分比高度
safari某些版本上,如 10.1.2,在flex布局中,如果某元素存在flex:1,且没有设置高度(flex:1会填满剩余空间,且在其他平台上,height会被flex:1屏蔽,所以一般没有设置heihgt
),那么其子元素的height如果设置为百分比,将会失效(高度设置为百分比,会相对父元素高度属性动态设置值,在flex:1填充剩余空间的策略中,
safari部分版本不会为其隐藏的height属性赋值,于是其子元素的百分比高度会因为没有参照高度而失效,与之相反的是其它浏览器会为这个隐藏的height属性赋值,从而正常解析。
),为避免这种情况,可使用height:calc(100% - ***)的布局方式替代flex布局