Пользовательский курсор не работает правильно в Chrome

Question

У меня проблемы с настройкой Chrome для правильного отображения моего пользовательского курсора, но, похоже, он работает так, как задумано в FireFox.

Чтобы дать немного контекста, в рамках моей попытки освоить HMLT5 / Javascript я собираю мини-игру со стрельбой, используя новый элемент canvas, и использую настраиваемую область видимостикурсор, который я создал с помощью Axialis Cursor Workshop, и вот HTML и CSS для холста:

<canvas id="canvas" class="block" width="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);
}

В chrome я вижу предупреждение: « Ресурс интерпретируется как изображение, но передается с помощью приложения / октета MIME-типа-stream."относительно файла scope.cur .Когда я перемещаю мышь в верхний левый угол области холста, я вижу, что курсор нарисован, но «горячая точка» курсора находится не в центре курсора.

В Firefox это работает снет проблем, я все еще вижу тот же курсор, и «горячая точка» курсора находится в его центре, как я и предполагал.

Любая идея, что я делаю не так, и как я могу это исправить для хрома?Стандартный курсор перекрестие отлично работает в хроме (в том смысле, что его «горячая точка» расположена правильно), но здесь он не совсем соответствует моей цели.

Вы можете убедиться сами здесь , просто переместите курсор в верхний левый угол в Chrome и Firefox, чтобы увидеть разницу.

Answer 1

Чтобы устранить предупреждение «Ресурс интерпретируется как изображение ...»:

• Создать текстовый файл с именем .htaccess

• Написать эту команду: AddType image/vnd.microsoft.icon .cur

• Сохранить в папке /cursors ИЛИ в любой родительской папке (обычно это корень сайта /)

Это должно работать на сервере Apache .

Вот пост об этом решении.

Answer 2

Для всех, кто заинтересовался, я решил эту проблему в конце, хотя это немного хак.

Сначала я попытался использовать пустой курсор, но затем Chrome отображает его как черный квадрат ... поэтому я решилНарисуйте цель как часть холста и используйте курсор, который имеет горячую точку 0, 0 и пуст, за исключением плитки 0, 0 того же цвета, что и цель.

Вы можете увидеть результат здесь как только вы запустите игру, это не очень хорошее решение, но, тем не менее, работает.

Answer 3

Я думаю, что здесь есть две разные проблемы.

1. Первая («Ресурс интерпретируется как изображение, но передается с применением MIME-типа application / octet-stream.») Должна быть исправлена ​​сервером-боковая сторона.Сервер должен отправлять scope.cur в виде изображения MIME, а не октет-потока.Вы можете попытаться изменить формат файла .cur (то есть .png) или написать файл .htaccess с правильным MIME.

2. Должны быть и свойства для CSS3 "курсор ": http://www.w3.org/TR/css3-ui/#cursor,, но я пробовал это в Chrome, и, похоже, он не работает:

   курсор: url (../ cursors / scope.cur) -10px -10px, перекрестие;

Answer 4

Мой ответ, вероятно, слишком поздно, но это должно работать в chrome:

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

Возможно, вам также понадобится написать небольшой скрипт, который проверяет типы браузеров, используя свойство jQuery $.browser.

Читать это: Кросс-браузер css - захватить курсоры для перетаскивания /

Примечание. Я считаю, что проблема типа MIME уже решена.