Chrome DevTools设备模拟下fixed元素触控指针坐标偏移问题

问题表现 #

开启Chrome DevTools的设备工具栏进入移动设备模拟状态后，点击操作的触控指针会出现坐标偏差：

• 大部分场景下偏差值非常细微，但操作fixed定位元素时，指针偏移最高可达25px
• 该异常仅在触发fixed定位元素交互时出现
• 问题仅存在于模拟器环境，真实移动设备访问无同类异常
• 复现测试所用Chrome版本：102.0.5005.115（正式版本，64位），模拟设备选择为iPad Pro

复现步骤 #

进入iPad Pro模拟模式后，把指针放在页面数字“5”的位置，尝试在其右侧数像素的位置连续点击，会出现明显的坐标返回异常：哪怕点击位置比上一次点击更靠右，事件返回的X坐标数值反而更小。
测试用代码如下：

<script>
  document.addEventListener('click',function(e) {
    console.log(e.pageX + ' ' + e.pageY);
  });
</script>

问题截图 #

补充说明 #

前端开发过程中会高频使用DevTools设备模拟器做调试，这个坐标偏移问题会干扰fixed定位交互组件的调试判断，如果有可行的解决方案欢迎告知，也请其他遇到同类问题的开发者帮忙确认问题复现情况。

内容的提问来源于stack exchange，提问作者Medda86