前端兼容问题等bug疑难杂症汇总

1. echart3.x获取dom元素和setOption数据都正常，但就是画不出图

现象：项目中遇到一个bug,使用tab页切换时候，切换出来的某个echarts图无法渲染（之前是偶现无法找到原因）

原因: 此图形容器未设置固定宽度

解决办法：可在画图时候动态设置宽高 或 css设置宽高

2. 文案超出容器动态缩放文字，页面内嵌h5 某些安卓机出现无文字情况

主要代码mounted执行

  scaleTabSize () {
      const domF = this.$refs.btnF
      const domC = this.$refs.btnC
      const fWidth = domF.offsetWidth - 8
      const cWidth = domC.offsetWidth
      if (fWidth === 0 || cWidth === 0) {
        console.warn('warn', cWidth, fWidth);
        return;
      }
      if (cWidth > fWidth) {
        this.itemStyle = {
          'transform': `translateX(-50%) scale(${fWidth / cWidth})`,
        }
      }
    }

原因：通过分析发现偶现容器宽度获取到的值为0 导致scale设置的值为0

解决办法：

  mounted () {
    this.isScale()
    window.addEventListener('resize', this.isScale)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.isScale);
  }

3. 在某些机型上出现flex布局左边固定宽度,右边默认宽度,两组相同布局的上下右边内部内容无法对齐

解决办法：ul容器设置flex:1

4. 使用背景图的图片,第一次加载在屏幕外,滑入视口,某些机型第一次点击更改箭头状态导致箭头消失或者状态不更改,页面有任何其他变化箭头会出现,随即正常(使用的不同背景图)

解决办法：ul容器设置flex:1

5. 解决定位元素遮挡其他元素导致事件无法触发简单处理

定位元素设置css属性
 pointer-events: none;

6. 苹果scroll滑动，未在第一屏出现的后面图片空白不显示(第一次点击不显示,而后正常)

解决办法： i:{ transform: translateZ(0)}

7. 设置env(safe-area-inset-bottom)在安卓8及以下导致的元素高度丢失不垂直居中兼容问题

// common.scss设置
:root {
  --sat: env(safe-area-inset-top);
  --sar: env(safe-area-inset-right);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
}

// 当前元素标签写法
height: calc(100vh - var(--sab));//设计师要求居中不计算安全距离
`此写法导致安卓8及以下机型在默认浏览器高度丢失`

解决办法 height:100vh; height: calc(100vh - env(safe-area-inset-bottom));

8. antd相关bug

8.1 打包后，timePicker组件 下拉框鼠标hover上去，导致自动选择非预期值

解决办法：使用dayjs来处理时间，而不是moment

9. 请求延迟导致新的后返回的脏数据覆盖最新的数据

如果请求过多则不需要使用axios的取消函数，直接这样处理就行了

   const requestIdRef = useRef<number>(0); 
   ---
   处理请求数据返回体内处理
   const currentRequestId = requestIdRef.current + 1;
   requestIdRef.current = currentRequestId;
    if(currentRequestId !== requestIdRef.current){
     return;
   }