今天写了一个弹窗功能,命名叫"ad-box"。还写了动画效果,本地环境顺畅得一批,结果更新到测试环境,好家伙,问题来了。测试环境死活不出来,一开始怀疑是缓存的问题,清除了缓存后,问题依然,好!是不是用的popup组件的问题?行,自己手写一个弹窗!本地依然顺畅,更新测试环境。纳尼!还是毫无动静,简直要怀疑人生。
再接着排查layers视图,依然没发现,样式有,dom元素也有。就是莫名奇妙不显示。
再接着排查,找到了蛛丝马迹
但是
.ad-box:not(#ad-banner) { display: none !important;}
.ad-box:not这是怎么加进来的?全局搜索也没有找到这个样式表,user agent stylesheet,浏览器样式?终于到了晚上吃饭的时候忽然想起来,这特么就是浏览器的广告拦截器搞的鬼。
解决的办法就是避免敏感词, 类名中避免使用与广告、弹窗等相关的敏感词汇。有些浏览器的广告拦截器可能会根据类名或内容中的关键词进行拦截。
万万没想到,一个意外命名,竟然会如此波折。作为一个老前端,这么久才找到问题!