浏览器页面无法点击问题分析

问题现象

最近在调试前端页面时，偶现一个奇怪的现象。开发的页面偶现鼠标无法选中，无法点击。

初次

排查：打开开发工具查找元素，发现元素选中不了，dom中无任何异常，没有一点思路，网上查找资料，未发现有参考价值的文章，初次分析失败。

再战

排查：第二次出现该现象时，打开其他页面，发现其他页面某些元素也无法选中点击。此时，排查方向往浏览器上排查，但仍无法定位明确原因。

三战

排查：第三次出现该问题时，针对无法点击的区域做了一个详细的比照，大致画出来了问题区域，是一块矩形区域。截图如下：

启发

联想到公司最近刚解决一个可见即可说无法扫描到元素的问题，定位原因是被一块弹窗遮住了底层元素，弹窗实现方式是一个小矩形，且占据屏幕的整块高度，弹窗下部分设置了透明，怀疑该问题也是类似。

真相

于是，又经过了漫长时间的摸索，找到了原因，浏览器的密码保存弹窗！！！

结论

当页面登录完成后，可能会弹出密码保存框（不是每次都弹），由于业务需要，登录后会进入一个全屏的看板页面，密码保存弹窗会被隐藏掉，虽然弹窗不可见了，但弹窗所在区域的鼠标事件没了。这里应该是浏览器的一个bug

类比

发现问题点后，测试了chrome和edge均有此问题，且出现问题时地址栏的密码保存按钮也失效了。

在写这篇文章用微信自带的截图时，发现截图中鼠标移上去，不可见的密码弹窗就显示了轮廓

解决方案

暂无，给官方提单子去

案子破了！