大概在我刚开始做前端开发的时候,接手前面一个同事的项目时,遇到一个很奇怪的bug,就是移动端的一个列表popup,还记得这个popup是选择用户还是机器的,点击了'选择'按钮之后就会用动画来弹出来.
但是就发现了一个bug,就是有一些手机上,弹出这个弹窗后,那个列表并不能滚动,但是把手机的方向锁定解除后,改变一下横屏竖屏又可以滚动了.
由于那时候是新手,凭借自己以往的经验,都以为是是因为点透或者滑动穿透而导致的,然后就往点透这个方向去想,去尝试解决.
结果加班尝试了好久都没有解决这个问题, 最后是公司找了一个在其他公司做前端技术主管的大佬来解决, 他只做了一件事情, 就是把这个弹窗的动画给去掉.
问了一下他是为什么,他就说了因为回流.但具体是因为什么却没有说.
最近在刷面试题,然后想到了重绘与回流,又找了文章看,才找到一篇2010年的文章回流与重绘：CSS性能让JavaScript变慢,里面说到回流消失的疯狂.
为了改进性能，浏览器厂商可能限制回流影响临近的节点或者联合其他几个回流形成一次大的改变，就如Mozilla的这篇文章中展示的。这可以提高性能，但有时也可能导致显示问题。您可以使用我们所了解到的关于回流的知识，在必要纠正相关显示问题的时候触发它们。
所以, 终于明白了.
至于怎么解决,由于我也无法重现了,大致的往回流引起的这个原因去想的话,除了像上面说的那样去掉那个动画,应该还可以手动的去setTimeout触发一下回流.
例如:
在DOM中插入，删除或更新元素
修改页面上的内容，例如输入框中的文本
移动DOM元素
动画DOM元素
对诸如offsetHeight或getComputedStyle之类的元素进行测量
更改CSS样式
更改元素的className
添加或删除样式表
调整窗口大小
滚动