那些年遇到的巨坑浏览器（持续更新中）

桌面端

桌面浏览器基本还算规范，产品也未要求什么冷门浏览器（毕竟除了巨硬，苹果内置浏览器，其他量级不够）

移动端

华为浏览器

华为自带浏览器内核及其混乱，X5，UC 都有，UC的没有遇到过

1. polyfill 兼容导致白屏，现在荣耀手机遇到了一个X5超级古董内核，页面打开白屏。查看UA 是 chrome 37 版本的。只通过browserlist + corejs很难做兼容了，没法捕捉到错误。一个很粗暴的解决方案就是直接引入全量包。

    <script src="https://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min.js"></script>

2. 浏览器操作栏遮盖底部定位元素。解决方案就是要么根据UA，X5内核的， 定位位置提上来。要么就设计上全部改为离底部有一定距离的。下面方案提到的设置<meta name=”full-screen” content=”yes”>， 实测不太好用。

解决方案地址：[h5]解决华为x5浏览器底部栏兼容问题

猎豹浏览器

1. 广告拦截可能导致图片无法加载！解决方案就是用户关闭广告屏蔽模式，好消息是新版本猎豹已经下线这个功能了。坏消息是用户不会升级新版本。
2. input file 无法上传文件，点击没有反应

safari 浏览器

scroll bouncing safari的一个很代表的问题。由此会衍生很多问题。

1. 双滚动区域导致偶尔滚动卡住。
2. 底部被遮挡