安卓 5 和 6 的白屏解决

最近在工作中遇到了低端设备 chrome，显示异常，记录下来

css var 缺失

import cssVars from "css-vars-ponyfill";

cssVars({
  onlyLegacy: true,
  watch: true, // 监听变量变化并动态更新样式，默认为 true
});

grid 失效

.fix {
  display: grid;
  grid-row-gap: var(--audio-panel-grid-container-row-gap);
  grid-column-gap: var(--audio-panel-grid-container-column-gap);
  grid-template-columns: repeat(
    var(--audio-panel-grid-container-col-count),
    1fr
  );
}

 {
  width: calc(100% / 6 - 8px);
}

getBoundingClientRect

在低版本中没有 x y 属性

所以需要用 left 和 top 属性替代 x y

position： absolute

低版本 left right top bottom 即使为 0 也要写

 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

append

append 在 53 以下浏览器都不能使用

替换为 appendChild

proxy

低版本浏览器 不支持 proxy

需要引用

import ProxyPolyfillBuilder from "proxy-polyfill/src/proxy";

const proxyPolyfill = ProxyPolyfillBuilder();
this.broadcasts = window.Proxy
  ? new Proxy({}, broadcastsHandler)
  : new proxyPolyfill({}, broadcastsHandler);

但这也不是一定能够解决的，因为浏览器没有实现这个特性 ，所以只能处理简单的 一些比较复杂的 则不行