Leaflet地图库在Chromium浏览器中光标消失问题解析

问题现象

近期有用户报告在使用Chromium内核浏览器(如Chrome、Edge)访问基于Leaflet地图库的网站时，出现了鼠标光标在进入地图区域后消失的现象。虽然地图功能仍可正常操作，但缺乏视觉反馈给用户带来了困扰。

环境分析

该问题最初出现在Windows 11 Home 24H2 26063.1系统环境下，使用Microsoft Edge浏览器124.0.2438.2版本。值得注意的是，用户同时报告了系统时间显示错误的问题，这提示可能与系统级设置或更新状态有关。

排查过程

1. 初步验证：开发团队尝试在标准环境下复现该问题，但未能成功，表明这不是Leaflet库的普遍性问题。

2. 系统关联性：进一步调查发现，该问题与Windows系统的一个已知时间显示错误有关。微软官方已确认这是一个系统级bug，会影响某些应用程序的UI元素显示。

3. 解决方案验证：用户后续反馈通过以下步骤解决了问题：

   • 将系统升级到最新版本
   • 手动调整时区设置
   • 重新同步微软时间服务器

技术原理

Leaflet地图库的鼠标光标样式是通过CSS控制的。在正常情况下，地图容器会设置默认的cursor属性。当系统时间设置异常时，可能会影响Chromium浏览器的CSS渲染引擎，导致光标样式无法正确应用。

预防措施

对于开发者而言，可以采取以下措施增强兼容性：

1. 显式设置地图容器的cursor样式：

.leaflet-container {
    cursor: default !important;
}

2. 在初始化地图时检查浏览器环境，必要时强制重绘光标样式。

总结

这类问题通常不是由Leaflet库本身引起，而是系统环境或浏览器渲染引擎的异常导致的。开发者遇到类似UI问题时，建议：

1. 首先检查系统时间和区域设置
2. 尝试在不同浏览器和设备上复现
3. 确保操作系统和浏览器为最新版本

通过系统性的排查方法，可以快速定位并解决这类显示异常问题。