H5适配bug总结

iOS兼容bug

1. 当iOS页面滚动时导致文本框光标偏移以及概率性的页面空白。
   原因：设置滚动惯性-webkit-overflow-scrolling: touch
   解决: 给滚动区域内元素添加以下样式-webkit-transfrom: translateZ(0px);
2. 单元格长按显示灰色区域
   解决: 添加以下样式-webkit-tap-highlight-color: transparent;

Android兼容bug

1. 键盘弹出时触发window的resize事件
   分析: onscroll事件以及onresize事件在键盘弹出时触发。
2. 键盘弹出时遮挡文本框
   解决:

_onClick(){
        if(DeviceInfo.isAndroid()) {
            const KEYBOARD_POPUP_TIME = 400;
            this.scrollTimer = setTimeout(()=> {
                const node = ReactDOM.findDOMNode(this);
                node.scrollIntoViewIfNeeded();
            }, KEYBOARD_POPUP_TIME);
        }
 }

通用bug

1. 事件冒泡引起触发onScroll触发时机不对
   解决:

const {target, currentTarget} = e;
if (target === currentTarget)return;

2. window的resize事件以及orientationchange事件回调中获取页面尺寸不对
   分析: resize回调中获取页面尺寸一般正确，但在android手机中键盘弹出也会触发此回调。orientationchange回调只在横竖屏切换时候触发，但获取页面尺寸一般不对。
3. 元素内部不可以滚动
   分析:阻止了元素touchmove事件的默认行为

document.addEventListener('touchmove', function (event) {
     event.preventDefault();
 }, false)

4. overflow: scroll默认滚动方式和touchmove自定义实现滚动方式对比
   scroll滚动浏览器默认支持；touchmove要自己实现，代码复杂。
   scroll默认支持多层滚动嵌套；touchmove要手动解决滚动冲突，代码复杂。
   scroll默认支持滚动惯性；touchmove要手动实现滚动惯性，性能较差。
   touchmove监听手势实现行列冻结；scroll监听滚动实现行列冻结，有延迟。
5. 全屏模态框如何实现
   通过CSS控制兼容性横竖屏切换较好，通过js控制在横竖屏之后获取屏幕尺寸兼容性较差。

//CSS控制
{
  position: 'absolute',
  left: 0,
  top: 0,
  right: 0,
  bottom: 0
}

6. overflow:'auto'滚动的A层与touch事件滚动的B层滚动冲突如何解决
   错误方法： A层添加touch事件，阻止事件冒泡和事件默认行为
   错误分析： A层添加touch事件之后，overflow:'scroll'滚动不再生效
   错误方法： A层添加onScroll事件，根据e阻止事件冒泡和事件默认行为
   错误分析：A层的onScroll事件对象e无法阻止外层B的touch事件
7. 如何设置table某一列宽度为0
   错误方法：设置width: 0px; 正确方法：设置width: 0%

<col key={`col${index}`} style={{ width }} />; //不生效
<col key={`col${index}`} style={{width: width > 0 ? width : '0%'}} />;