曾经浏览过某在线视频网站,发现某页面下拉后出现明显的“上下抖动”的现象。使用工具查看HTML DOM元素和源码,发现了一些端倪。
HTML变化前:
HTML变化后:
稍微检查元素后,发现是一个header标签发生改变:class属性不断循环在两个固定值之间切换。很明显,这应该是某些Javascript脚本引起的。查看网页源代码,查找该id的标签没有找到相关脚本。又逐个查阅远程javascript脚本源码。最终发现问题的关联。
杜娘搜索一番关键字“headroom”得到关联:
显而易见,这是headroom.js这个脚本引起的页面“抖动”bug。出现这个bug时为chrome浏览器。在win7/win10分别测试过,均显示相同的结果。而在IE浏览器下,页面显示正常。
拖动页面至底部,发现该header标签的margin在几个不同的数值间不停的变化。初步判断应该是,在chrome浏览器环境下,使用该headroom.js进行页面调整,在数值计算时出现精度误差引起的“灾难级”bug。