CSS - 自定义光标图像在 Chrome 中的视口边缘附近恢复

Question

我有一个页面，其中整个区域都被链接覆盖。当用户将鼠标悬停在链接上时，我实现了一个带有60x60 像素 PNG 图像的自定义光标（因此在页面上的任何位置，光标应显示为白色 X）。

我的问题是：当光标（或者更确切地说，光标显示的图像的边缘）接触页面的边缘时，光标恢复到我指定为后备的“指针”状态。这是我使用的 CSS：

cursor: url('https://i.ibb.co/pRX8Fxg/close.png') 30 30, pointer;

在我提出的问题的jsfiddle 中，这似乎只发生在顶部和左侧，而不是底部和右侧（这非常令人困惑，因为这使我的理论无效，即这是由于浏览器的边缘）。然而，在我的页面中，这发生在所有四个方面。

当我使用 .cur 文件时，Firefox 和 Edge 不存在此问题。

我试过：改用 .cur 文件，改变热点的位置，试图找出 jsfiddle 页面的不同之处。

任何帮助将非常感激。

Answer 1

保持光标小于或等于 32x32 DIP。

宽度或高度大于 32 DIP 的自定义光标如果与原生 UX 相交（即未完全包含在视觉视口中）将被删除。

大游标在网络上被滥用，以迷惑用户（参见https://crbug.com/880863）。具体来说，大型自定义光标可用于覆盖具有任意图像的重要（有时与安全相关）浏览器本机 UX，以误导用户认为他们在内容区域之外单击。

来源：https : //www.chromestatus.com/feature/5825971391299584