一、定位元素消失不见
常见原因：position:fixed, position: stiky 失效
正常情况下：一个元素设置了position:fixed时，元素脱离了正常文档流，定位相对于视口(viewport)
但是，如果元素的祖先元素设置了transform，prespective，filter属性为none时，则fixed定位从原来相对于视口，变为了设置了特殊属性的祖先元素
常出现此bug的地方：
swiper里用position: fixed 或者 position: stiky定位
解决方案：
-
设置transform元素的宽高，然后可以通过position:absolute实现fixed的效果
-
改变元素层级，把需要fixed的元素挪为transform元素的兄弟元素或者挪到最外层，如dialog, toast等
二、IOS10, IOS11，安卓低版本白屏
常见原因：语法未兼容，即有ES6或更高级的语法没被编译为ES5
解决方案：
先检查是否有ES6及以上语法未被编译，有则进行编译，无法编译的，直接用ES5改写
三、数据显示异常（部分内容未展示，或者叠在一起）
常见于低版本系统
常见原因：样式引起，比如flex属性不被支持，元素高度未被撑开
解决方案：对设置了flex:1 1自动撑开的元素，设置height：100%；
schedule-wrap {
flex: 1 1;
height: 100%;
}
四、元素被遮挡
常见原因：其它元素设置了transitionZ属性引起的层级问题，比如better-scroll里给滚动content设置了translateZ(1px)
解决方案：被遮挡的元素也设置transitionZ属性
.fixed-btn {
position: absolute;
bottom: .35rem;
left: 50%;
transform: translate3d(-50%, 0, 1px);
}
五、时间错误
常见于展示时间，或者时间作为参数和客户端有交互时，安卓端显示正常，但IOS无法正常显示，或者拿不到正确数据
常见原因：时间格式引起，IOS下时间用 - 拼接解析错误
解决方案：用/拼接，不用-。eg: (2022/08/12)
六、图片不显示
常见原因：图片格式不支持，比如webp格式
解决方案：如果图片是webp格式，可以先判断浏览器是否支持webp格式，如果不支持，采用其它格式
export const isSupportWebp =( () => {
try {
return document.createElement('canvas').toDataURL('image/webp', 0.5).indexOf('[data:image/webp](http://dataimage/)') === 0;
} catch(err) {
return false;
}
})()
