前端开发兼容性问题和其他问题记录

[qppq54s]

react-transtion-group导致魔点科技双面屏设备闪白块

解决方案，移除react-transtion-group相关代码，原理正在研究

双面屏点击按钮，按钮绑定onTouchStart或者onTouchTap事件打开modal，modal自动关闭

在onTouchTap事件中加上e.preventDefault后不再出现
目前猜想：因为onTouchTap的触发比点击事件早，在触发展示modal后，onClick事件被触发，导致点击蒙层，关闭modal。

mobile-ant-design在初次渲染无法打开modal

初步判断是低版本ios的问题，在android和ios10以上系统无法复现

快速点击时，容易触发多次点击事件

方案1:

let a = false;  
function onClick = () => {  
  if (a) return;  
  // do something  
  a = true;  
  setTimeout(() =>{  
      a = false;  
  }, 500);  
}  

然而这种方案每次使用的时候都要创建变量，使用上不能即插即用。
方案2: debounce函数

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

移动端弹层滚动穿透问题

关于滚动穿透，一开始我的解法是采用了网络上的“最优解”：

body.modal-open {
    position: fixed;
    width: 100%;
}

/**
  * ModalHelper helpers resolve the modal scrolling issue on mobile devices
  * https://github.com/twbs/bootstrap/issues/15852
  * requires document.scrollingElement polyfill https://uedsky.com/demo/src/polyfills/document.scrollingElement.js
  */
var ModalHelper = (function(bodyCls) {
  var scrollTop;
  return {
    afterOpen: function() {
      scrollTop = document.scrollingElement.scrollTop;
      document.body.classList.add(bodyCls);
      document.body.style.top = -scrollTop + 'px';
    },
    beforeClose: function() {
      document.body.classList.remove(bodyCls);
      // scrollTop lost after set position:fixed, restore it back.
      document.scrollingElement.scrollTop = scrollTop;
    }
  };
})('modal-open');

然后在react生命周期中调用ModalHelper对应的方法。然而这种方法需要修改项目样式文件，在作为组件时不易使用。后面我们还是采用了监听touchmove事件的方法。

// 在modal打开的时候添加事件监听
this.ref.addEventListener('touchmove', this.preventDefault, {passive: false});
this.inner.addEventListener('touchmove', this.preventDefault, {passive: false});

<div ref={ref => this.ref = ref}>
  <div ref={ref => this.inner = ref}}>
  </div>
</div>

preventDefault = (e) => {
  e.preventDefault();
}

ios页面在键盘收起时没有及时响应导致页面卡死

在最近的一次native发布后，我们的页面在键盘回落时没有复原，导致页面底部的按钮无法点击。
解决方案是通过给输入框添加onblur监听并且使用window.scrollTo(0,0)触发滚动。具体原理还是不知道