Looking to add a custom cursor to your web page or HTML5 game?

Be prepared for some significant pain... and not just with IE.

This post details the current state of custom cursor support.
Multiple browsers are tested on Linux, Windows and Mac OS X.

The following CSS is being used:

	.pointer {
		cursor: url("/cursors/pointer.cur"), auto;
	}

	.pointerDown { 
		cursor: url("/cursors/pointerDown.cur"), auto;
	}

	.arrow { 
		ursor: url("/cursors/arrow.cur"), auto;
	}	

Note: A small glitch may occur once during each test, while the browser loads the cursor. Thus each test should be tried twice.

To run each test, simply move your mouse over each grey box.

Simple Custom Cursor

For this test, we will simply show a custom cursor.

Results
Firefox 2, 3.6, 8, 14, 18	Works!
Chrome 21, 24, 25	Works!
Safari 4.0.5, 5.1.4, 6.0.2	Works!
IE 9, 10	Works!
IE 6, 7, 8	Works, but cursor is constrained to 32x32
Opera 12.14	Fails - Custom cursors are not supported

Ok, not the end of the world. If we forget about Opera and restrict our cursor size to 32x32 for IE, we can support almost all browsers.

UPDATE 2-14-2013: Opera has decided to switch to WebKit for their rendering engine. This means we will likely see custom cursor support in the next WebKit based version of Opera!

Automatic Cursor Changing

This test will automatically alternate between two different cursors.

Results
Firefox 2, 8, 14, 18	Works!
Chrome 21, 24, 25	Works!
Safari 5.1.4, 6.0.2	Works!
Safari 4.0.5	Fails* - Never changes after the first custom cursor
IE 7, 8, 9, 10	Fails* - Never changes after the first custom cursor
IE 6	Fails* - Changes to default arrow on first switch and remains that
Opera 12.14	Fails - Custom cursors are not supported

Fails* - If you continually move the mouse around, then the cursor changes correctly.

Basically, mouse movement is required in many browsers in order to re-draw the correct custom cursor.

There is an open issue for Chrome about this: Issue #26723
However my tests with Chrome didn't show a problem.

Change Cursor on Mouse Down

Let's try changing the custom cursor when the mouse button is pushed down.

Results
Firefox 2, 8, 14, 18	Works!
Chrome 21, 24, 25	Fails - Does not change on mouse down
Safari 4.0.5, Safari 5.1.4, 6.0.2	Fails - Does not change on mouse down
IE 9, 10	Fails - Does not change until mouse up, then shows the default arrow
IE 7, 8	Fails* - Does not change until mouse up, then shows the down version
IE 6	Fails* - Changes to default arrow on mouse down
Opera 12.14	Fails - Custom cursors are not supported

Fails* - For IE 8 or less, if you move the mouse around, the cursor changes correctly.

This is where things start to get ugly. The ONLY browser that supports changing the cursor when the mouse button is pressed is FireFox.

So if you were hoping to have a cursor change while the user clicks on things... think again.

UPDATE 2-14-2013: A patch has landed on WebKit that fixes the bug that prevented the cursor from changing on mouse down.
This means future versions of Chrome and Safari should both support this feature soon!

Custom Cursor With Scroll Bar

Does the custom cursor work when using a scroll bar?

Results
Firefox 2, 8, 14, 18	Fails - Changes to default arrow when over scroll bar
Chrome 21, 24, 25	Works!
Safari 4.0.5, Safari 5.1.4, 6.0.2	Works!
IE 6, 7, 8, 9, 10	Fails - Changes to default arrow when over scroll bar
Opera 12.14	Fails - Custom cursors are not supported

Pretty poor support for this. Oddly enough, Chrome and Safari (WebKit) are the winners in this test.
While not tested, my guess is select boxes will show similar problems with custom cursors.

Summary

As you can see, ALL the browsers have a long ways to go before you can rely on custom cursor support for something like a game.

I discovered these problems when developing my latest web game: World of Card Games

As a work around, I use a transparent 1x1 cursor and draw my own custom cursor image with an <img> tag.
On mouse move I use a CSS transform to translate the position of the <img> to the current cursor coordinates. This gives pretty good performance.

Future web games I create will be WebGL based and their cursors will be also drawn with WebGL and likely animated.

I don't anticipate browser support improving any time soon. Many of these issues have been known about for years.

UPDATE 2-14-2013: With Opera switching to WebKit and a patch landing in WebKit to fix the on mouse down bug, looks like things may be improving a lot sooner than I first thought!