坑一、页面所有图片和icon都不显示
上周五，有人在群里反馈有些用户（其实就是一个）访问我们的一个页面，icon和图片均不显示；惯性思维以为是用户网络问题，后来想想不对，因为那个页面所有的icon和图片都不显示，因此要么代码的兼容性问题，要么是用户设置了无图模式进行浏览网页；由于客服没有提供用户手机信息，因此
1、将background的简写全部改成全称写法，因为background-size的兼容性在安卓4.3及以前有问题
image.png
2、提示用户关闭无图模式；
总结：a、有的时候不光考虑代码问题，还需要考虑浏览器设置或者用户操作问题；b、遇见困惑时，有的时候自己在做其他事时，大脑可能会突然想到问题的解决方案（这次是自己刷牙的时候想到用户开了无图模式）c、package.json里的browserslist
image.png
会影响打包后的css前缀
加上了 Safari >= 6后的变化
这一点相信大家都能够理解，就像改
.babelrc文件里的targets 下的browsers一样会影响js版本
坑二、倒计时与实际相差4小时
在做一个新年活动，测试人员反馈一台手机与实际正好相差4小时，当时觉得有点奇怪，如果相差8小时还能够理解（8小时 可以考虑我们在东八区），为啥相差4小时呢？检查代码，发现没有问题，于是在网上搜索也没有发现这方面的资料，这时自己突然灵机一动，是不是手机的原本系统时间就有问题？一看手机，果然，手机系统时间慢了4小时。。。
总结：a、如果是个别问题，除了检查代码要考虑是不是用户的设置问题；b、new Date() 出来的时间跟手机的系统时间相关；
坑三、Safari 11浏览器 new Date('2019-01-01 00:00:00') 会提示非法的日期，但Chrome 正常
其实这个如果仔细看 MDN的Date介绍就知道它强烈不推荐使用Date构造函数来解析日期字符串，因为不同的浏览器有不同的差异；
image.png
后来通过测试火狐72.0.2、IE11、Edge 44浏览器，发现IE11也会提示非法的日期，但火狐和Edge浏览器正常；再后来将日期改成 new Date('2019/05/05 00:00:00')，前面测试的几个浏览器都正常；
总结：1、平时有事没事多看一下MDN，或者多刷掘金之类的文章；2、多收集一下前端开发的那些坑；3、写代码后测试一定要充分，多试几个浏览器(含不同种类和不同版本)；
坑四、页面底部position:fixed 元素不显示
客服反馈有几个华为用户，在购买产品页面底部的“立即支付”一栏不显示，检查代码，没有发现问题。后来搜索资料，发现百度浏览器会把页面上的元素为position:fixed给当作广告屏蔽掉。。。 第二天获取到一位用户的user-agent信息，发现确实是百度浏览器内核（其实是华为手机系统自带浏览器，但采用的是百度浏览器内核），果然是百度浏览器内核搞的鬼。。。【20年3月12日更正：今天通过用户的访问日志拿到当时用户的浏览器不是百度内核，而是Mozilla/5.0 (Linux; U; Android 9;zh-cn; PAR-AL00 Build/HUAWEIPAR-AL00) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 Chrome/57.0.2987.132 MQQBrowser/8.1 Mobile Safari/537.36，其实是QQ内核；另外也不是被屏蔽掉而是“立即支付”一栏被浏览器的底部菜单栏完全挡住了----我通过DevEco平台上的一模一样的云真机给模拟出来了。。。 】ps：由于fundebug只记录一个月的信息，因此user-agent和用户浏览器信息没有保存下来。。。【更新：可以让运维那边拿到当时用户的访问日志】
总结
a、自己应该及时总结，避免信息被丢失了；
b、出现问题不要想当然，以为就是自己判断的原因，一定要严谨的证实，这一点自己已经犯了两次错误了，一次是购买产品页面出现空白的情况，还有这一次；
c、出现问题，一定不要放过；
d、解决问题后，一定要进行确认是什么原因导致的，有可能你分析是A原因，然后你采取了措施确实解决了该问题（没有从根本上解决），但其实原因跟A没有任何关系，而是B原因；
e、运维知识和后端知识需要积累和学习，否则思维太局限了；
网友评论