BBC 导航栏组件如何根据连接的外部显示器而出现故障 - Josh Tumath

主要观点:团队修复了一个只有一人能在特定环境下重现的奇怪 bug,该 bug 与 BBC 英国网站的“更多”按钮点击事件有关,仅在用户使用外部显示器且浏览器窗口位于特定位置时出现,在 Safari 中不会发生,经过调查发现是浏览器在多显示器设置下屏幕坐标表示的互操作性问题,最终通过修改代码解决了该问题。
关键信息:

  • 只有一人能在工作笔记本在家用外部显示器时重现 bug,在办公室同一笔记本上正常。
  • BBC 网站“更多”按钮用click事件响应,该事件可由多种方式触发。
  • 在家用外部显示器时点击“更多”按钮,click事件无反应,而是使用无 JavaScript 回退行为打开菜单。
  • 当浏览器窗口位于外部显示器且在操作系统设置中位于特定位置时会出现 bug,在笔记本屏幕上点击正常,且不在 Safari 中出现。
  • 调查发现该 bug 与 Chrome 和 Firefox 中screenXscreenY属性为负数有关,推断出浏览器在多显示器设置下屏幕坐标表示的互操作性问题,最终得出需要同时检查正负坐标的解决方案。
  • 修复方法是将isInvokedByMouse函数修改为检查screenXscreenY不等于 0 。
    重要细节:
  • 团队通过重新定位外部显示器在操作系统设置中的位置来重现 bug 。
  • 代码中通过console.log获取“更多”按钮点击事件的相关信息。
  • 代码中isInvokedByMouse函数用于检查点击事件是否由鼠标触发。
  • 编辑于 2024 - 11 - 19 ,有很多关于为何检查screenX的疑问,作者已重构导航组件并在后续博客中解释。
阅读 12
0 条评论