Custom cursor not working correctly in Chrome

I'm having trouble getting chrome to display my custom cursor correctly but it seems to work as intended in FireFox.

To give a little context, as part of my attempt to get up to speed with HMLT5/Javascript I'm putting together a mini shooting game using the new canvas element and I'm using a custom scope-like cursor I created with Axialis Cursor Workshop and here's the html and css for the canvas:

<canvas id="canvas" class="block" wi开发者_JS百科dth="800" height="700"
        onSelectStart="this.style.cursor='url(cursors/scope.cur), crosshair'; return false;"/>

#canvas
{
    cursor: url(../cursors/scope.cur), crosshair;
    background: url(../images/canvas_background.jpg);
}

In chrome, I see a warning saying "Resource interpreted as image but transferred with MIME type application/octet-stream." in relation to the scope.cur file. When I move my mouse to the top left corner of the canvas area I can see the cursor is drawn but the 'hot spot' of cursor is not at the center of the cursor.

In firefox, this works with no problem, I can still see the same cursor and the 'hot spot' of the cursor is at its center as I intended.

Any idea what I'm doing wrong here and how can I fix it for chrome? The standard crosshair cursor works fine in chrome (in that its 'hot spot' is positioned correctly) but it doesn't quite fit my purpose here.

You can see for yourself here, just move the cursor to the top left corner in chrome and firefox to see the difference.

---

To solve the "Resource interpreted as image..." warning:

• Create a text file named .htaccess

• Write this command: AddType image/vnd.microsoft.icon .cur

• Save in folder /cursors OR in any parent-folder (typically the site root /)

This should work on Apache server.

Here a post about this solution.

---

For anyone interested, I solved this problem in the end though it's a bit of a hack.

I first tried using a blank cursor but then Chrome renders that as a black square.. so I decided to draw the target as part of the canvas and use a cursor which has hotspot at 0, 0 and is blank EXCEPT the 0, 0 tile which has the same colour as the target.

You can see the result here once you start the game, it's not a pretty solution, but works nonetheless.

---

I think there are two different problems here.

1. The first ("Resource interpreted as image but transferred with MIME type application/octet-stream.") should be fixed server-side. The server must send scope.cur as image MIME, not octet-stream. You could try to change the format of the .cur file (i.e. .png) or you could write a .htaccess file with the right MIME.

2. There should be and properties for CSS3 "cursor": http://www.w3.org/TR/css3-ui/#cursor, but I have tried this in Chrome and it does not seem to work:

   cursor: url(../cursors/scope.cur) -10px -10px, crosshair;

---

My reply is probably way too late by now but this should work in chrome:

cursor: url(../cursors/scope.cur) 4 4, crosshair;

You might also need to write a little script that checks for browser types using the jQuery $.browser property.

Read this: Cross browser css - grab cursors for dragging/

Note: I believe MIME type problem has already been addressed.