Mapbox-GL-JS在屏幕高度>1024px时，加载GeoJSON数据并启用世界包裹（world-wrapping）时Edge浏览器角落出现渲染异常（artifacts）

嘿，我刚好碰到过类似的Edge浏览器下Mapbox的渲染问题，给你几个排查和解决的思路试试：

先确认下这个问题的复现场景和步骤是不是和你遇到的一致：

• 在Angular项目中使用mapbox-gl-js，加载GeoJSON数据并开启了世界包裹功能
• 当屏幕高度超过1024px时，Edge浏览器的屏幕角落会出现奇怪的渲染瑕疵
• 复现操作：
  • 将测试项目克隆到本地
  • 打开终端执行 npm i 安装依赖
  • 运行 npm run start 启动项目
  • 打开Edge浏览器的开发者工具，就能看到角落的异常渲染

针对这个Edge特有的问题，你可以按这几个方案逐一尝试：

1. 验证世界包裹功能的影响：在添加GeoJSON数据源时，暂时关闭世界包裹（把worldview: true改为false），看看异常是否消失，确认是不是这个功能和Edge的高屏幕高度渲染逻辑冲突。
2. 升级Mapbox-GL-JS版本：这类渲染bug很多是已知兼容性问题，升级到最新的mapbox-gl-js版本，大概率已经修复了Edge下的这个角落渲染异常。
3. 简化GeoJSON数据精度：如果你的GeoJSON坐标精度过高，可能会导致Edge在计算边缘渲染时出错，可以尝试把坐标精度简化到5-6位小数，降低渲染计算的复杂度。
4. CSS硬件加速优化：给Mapbox的容器元素添加transform: translateZ(0)属性开启硬件加速，或者设置容器overflow: hidden，尝试掩盖住角落的异常渲染效果。

你可以先从升级版本和关闭世界包裹验证开始，这两个是最快速的排查方向，要是还解决不了再试试数据简化和CSS优化的方案。

备注：内容来源于stack exchange，提问作者Felix Olszewski