NedInYaHead on July 21st
66 views

Resized + blurry cursors on personal websites

When applying a cursor via a link to a html website, cursors appear slightly blurry and larger than normal, which negatively affects their appearance, especially the appearance of those using pixels.

This makes it less likely that users will follow the link to download a cursor, and makes previewing changes harder.

Any advice on how to solve this, or insights into why this happens?

nibbler on July 21st 0

Does the cursor have multiple sizes? Is your screen resolution set higher than 100%? And lastly, is your cursor size set higher manually?

Vlasta on July 21st 0

It is up to the web browser how to present cursors to the user and it has changed in the past. Windows version, the current scaling factor and cursor size set there may also affect it. In short, it almost impossible quite hard to have a good user experience in all cases (different browsers, different Windows, different settings). And this does not even consider running Windows desktop in HDR.

You have to try different ways and test a lot. If you do not need animated cursors, try using a .cur with multiple sizes inside - they have decent support in many browsers. If you need animations, well, you may try to serve different files and use javascript to try to find the actual size the cursor will use. Or you can try using SVG files as cursors.