Bug：Javascript调整HTML CSS引起“可怕”的页面抖动

曾经浏览过某在线视频网站，发现某页面下拉后出现明显的“上下抖动”的现象。使用工具查看HTML DOM元素和源码，发现了一些端倪。

HTML变化前：

变化前

HTML变化后： 

变化后

稍微检查元素后，发现是一个header标签发生改变：class属性不断循环在两个固定值之间切换。很明显，这应该是某些Javascript脚本引起的。查看网页源代码，查找该id的标签没有找到相关脚本。又逐个查阅远程javascript脚本源码。最终发现问题的关联。

相关id标签关联的javascript脚本

杜娘搜索一番关键字“headroom”得到关联：

headroom相关搜索结果

显而易见，这是headroom.js这个脚本引起的页面“抖动”bug。出现这个bug时为chrome浏览器。在win7/win10分别测试过，均显示相同的结果。而在IE浏览器下，页面显示正常。

拖动页面至底部，发现该header标签的margin在几个不同的数值间不停的变化。初步判断应该是，在chrome浏览器环境下，使用该headroom.js进行页面调整，在数值计算时出现精度误差引起的“灾难级”bug。