CSS - Custom cursor image is reverting near edges of the viewport in Chrome

Question

I have a page where the entire area is covered by a link. I have implemented a custom cursor with a 60x60 px PNG image when the user hovers over the link (so anywhere on the page, the cursor should appear as a white X).

My issue is this: When the cursor (or rather, the edge of the image shown by the cursor) touches the edge of the page, the cursor reverts to the "pointer" state which I assigned as a fallback. Here's the CSS I used:

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

In the jsfiddle I made of the issue, this only seems to happen with the top and left sides, and not the bottom and right sides (which is very confusing since that invalidates my theory that it was due to the edge of the browser). In my page however this happens with all four sides.

The issue is nonexistent with Firefox, and with Edge when I use a .cur file.

I've tried: using a .cur file instead, changing the position of the hotspot, trying to figure out what jsfiddle's page does differently.

Any help would be much appreciated.

Answer 1

Keep your cursor smaller or equal to 32x32 DIP.

Custom cursors with widths or heights greater than 32 DIP will be removed if they intersect native UX (i.e. are not fully contained in the visual viewport).

Large cursors are being used abusively on the web, to confuse users (see https://crbug.com/880863). Specifically, large custom cursors can be used to cover important (sometimes security related) browser native UX with an arbitrary image to mislead users into thinking they are clicking outside the content area.

Source: https://www.chromestatus.com/feature/5825971391299584