谷歌浏览器手机版的Display:none block问题Bug处理记录

Google Chrome手机版v44,测试功能的时候发现菜单ul,li不显示,电脑上使用桌面版进行F12进行手机模拟机调试,一切都是正常的。Debug代码,尝试了多种方案!对比同事正常的页面,拿微信自带的浏览器试,没有此问题。但是作为要给客户使用的产品,还是想把问题解决掉。但是这个问题比较诡异!

作为经验的驱使,我尝试,show,hide进行了重新绘制,结果Bug还是存在,Display:none之后再block的元素li还是出现莫名其妙的不显示。做为喜欢使用chrome的小伙伴,在桌面上完整调试后,还出现此问题,着实有些不爽。

代码方案进行了调试,样式输出核对,都发现不了问题。最后,脑残式的发现,li的元素个数似乎有些少。估计号称【速度、性能】的浏览器工程师,可能会出现页面优化考虑,将不在显示区的不重绘!这完全是一直直觉的猜测!甚至自己都觉得可能、大概 、也许,不过试了这么多招,再试一下。

增加几个占位的li之后,既然解决了问题。于是,接着强制将样式去掉,再将绑定上的click事件卸载,模拟成Very thing is normal的情况。整体上功能像是正常的。

再以Chrome block bug做为关键词查询,发现,绝对定位这块,Chrome 40左右的版本是有类似的问题。目前使用的桌面版是59。自己的手机是44。

没想到被谷歌坑到了~