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

Question

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

Чтобы дать небольшой контекст, как часть моей попытки подняться до скорости с помощью HMLT5/Javascript Я собираю мини-стреляющую игру с использованием нового элемента canvas, и я использую настраиваемый видимый для области видимости курсор I создан с 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); 
} 

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

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

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

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

Answer 1

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

Сначала я попробовал использовать пустой курсор, но затем Chrome отображает это как черный квадрат .. поэтому я решил нарисовать цель как часть холста и использовать курсор, который имеет точку доступа в 0, 0 и пуст. ЗА ИСКЛЮЧЕНИЕМ 0, 0, который имеет тот же цвет, что и цель.

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

Answer 2

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

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

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

   курсора: URL (../ курсоры/scope.cur) -10px -10px, перекрестье;

Answer 3

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

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

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

Прочитайте это: Cross browser css - grab cursors for dragging/

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

Answer 4

Чтобы решить "Resource истолкована как изображение ..." предупреждение:

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

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

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

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

Here a post об этом решении.