Пользовательский курсор на дисплее сетчатки (действительно рабочая техника) - PullRequest
Новая
       41

Пользовательский курсор на дисплее сетчатки (действительно рабочая техника)

0 голосов
/ 30 мая 2018

Я прочитал много дискуссий и статей, но ни одного из них не было для решения этой проблемы.Качество пользовательских курсоров на устройствах Retina неадекватно (они размыты), и мне интересно, есть ли способ, обеспечивающий адекватное качество даже на этих устройствах.Я пытался использовать файлы .svg и .png и использовать различные методы CSS:

1) классическая формула 

body {
  cursor: url ("assets/cursors/pointer.png"), pointer;
}

2) медиазапросы с указателем для этих устройств.

@media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {  
 body {
  cursor: url ("assets/cursors/pointer@2x.png"), pointer;
 } 
}

3) кросс-браузерное решение 

body {
  cursor: url ("assets/cursors/pointer.png") 0 0, pointer; /* Legacy */
  cursor: url ("assets/cursors/pointer.svg") 0 0, pointer; /* FF */
  cursor: -webkit-image-set (url ("assets/cursors/pointer.png") 1x, url ("assets/cursors/pointer@2x.png") 2x) 0 0, pointer; /* Webkit */
}

Из всех обсуждений здесь о переполнении стека, по этой ссылке Размытие курсора мыши SVG на дисплее Retina , котороеиспользует jQuery вместо CSS-кода, кажется, единственный эффективный с точки зрения качества;к сожалению, однако, возникает проблема прокрутки.

У кого-нибудь есть решение на случай, если вы хотите использовать решение с помощью CSS, а другое - с помощью jQuery?

1 Ответ

0 голосов
/ 30 мая 2018

Я недавно обсуждал это с ребятами из W3C, и мы согласились, что мы должны сделать это с помощью image-set ().См. Здесь: https://github.com/w3c/csswg-drafts/issues/2480. 

cursor: image-set( "foo.png" 1x, "foo-2x.png" 2x), pointer;

К сожалению, Firefox игнорирует его годами, поэтому сегодня невозможно заставить его работать в FF: https://caniuse.com/#feat=css-image-set

Я изо всех сил пытаюсь убедить парней FF реализовать это , но, к сожалению, ни у кого нет на это времени :( Но, по крайней мере, они усердно работают, чтобы позволить вам синхронизировать закладки с тостера.

...