又一次寻找bug的经历...这次是 openlayers + chrome + win7

2019独角兽企业重金招聘Python工程师标准>>>

回想起来,真后悔当初一腔热血上Ext....

最近项目上的时间有些紧张了.客户急着看产品.没办法只能暂时放下底层代码编写.开始折腾界面.

当时领导问前端用什么做.由于刚来公司,涉水不深.所以一个老员工提出Ext的时候,出于尊敬我也没多想.而且框架什么的,熟悉几天就能会用.

结果问题出的太多了.

今天整理地图相关的代码.本以为是团队其他队友写的代码太乱造成chrome加载地图的时候老是背景色挡住全部页面. 于是我花了两天时间封装了一个Openlayers的功能库. 写完了一测试.chrome下面还是出现背景色问题. /** 详细描述: 加载好地图以后.缩放一下,或者拖拽一下.浏览器加载地图会一层一层加载,并且会出现色块完全挡住大多数的元素. 如果定位色块位置,就会定位到地图的切片上.切片都是透明的图片. 这个时候,如果取消掉几个图层.会有改善.但是如果再次缩放,色块又出现了. 如果加载单个图层是没有这个问题的. 最重要的是,这个问题在IE下面不存在...... **/

一开始,我以为是Openlayers和Ext库冲突.Ext的样式刷掉了Openlayers的样式造成的. 于是写了一个空白页面直接加载.发现还是有这个问题.

于是蛋痛了......下午折磨了一下午摸不着头绪.

快下班的时候,开始和同事各种扯蛋....下班以后.重新开始找问题. google之....

于是找到了答案...在github上面有相关问题的issue讨论.ps:github真是好地方...浪里个浪

原因嘛: 因为Openlayers的Css样式里面 在切片的图片样式的时候有下面两个属性 -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden;

这两个样式导致 Chrome + win7 下面 图层大于6个的情况下 出现色块....

改正的手段很简单

.olTileImage { -webkit-backface-visibility: visible !important; -webkit-transform: none !important; }

总结一下这次排查Bug的经历. 首先,大胆猜测,细心排查. 一开始测试到IE没问题的时候,就想到可能是Chrome的问题.只是当时还是怀疑自己的代码写的有问题. 于是开始在一个干净的页面上重新搭建测试类库.排查掉所有干扰因素.确定可能是chrome的问题. 其次,别用百度,别在google里面写中文. 这问题一开始是让同事处理的.处理结果就不说了.反正就是百度无果.google也无果. 不是我吐槽国内环境不行,而是这是没办法的事.毕竟英语是标准.而且我们用的绝大多数东西都是只会说英语的人写的. 在google里面使用英文关键字.找到github或者stackoverflow上的答案基本八九不离十了.

当chrome终于正确加载图层的那一刻....我从椅子上欢呼起来~

果然我喜欢这个工作.....

转载于:https://my.oschina.net/jsmagic/blog/226744