Bug 254197 - css svg cursor is blurry
Summary: css svg cursor is blurry
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Safari 15
Hardware: Mac (Intel) macOS 12
: P2 Major
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2023-03-20 21:49 PDT by bulubin8
Modified: 2023-07-25 05:19 PDT (History)
6 users (show)

See Also:


Attachments
look at cursor blurry (992.00 KB, image/jpeg)
2023-03-20 21:49 PDT, bulubin8
no flags Details
svg cursor after setting large cursor size in system (3.62 MB, image/jpeg)
2023-07-25 02:28 PDT, Boolat
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description bulubin8 2023-03-20 21:49:54 PDT
Created attachment 465536 [details]
look at cursor blurry

when the cursor style in CSS is SVG, it is blurred under Safari, which is normal in Chrome and Firefox
Comment 1 Karl Dubost 2023-03-26 21:03:23 PDT
Do you have a link to a test case, where this can be reproduced?
Thanks.
Comment 2 bulubin8 2023-03-27 03:41:37 PDT
(In reply to Karl Dubost from comment #1)
> Do you have a link to a test case, where this can be reproduced?
> Thanks.

Look at this link to reproduce 👉🏻 https://codepen.io/bulubin/pen/zYJJgxQ
Comment 3 Radar WebKit Bug Importer 2023-03-27 21:50:17 PDT
<rdar://problem/107300140>
Comment 4 Karl Dubost 2023-03-27 22:59:12 PDT
The blurriness is visible mostly on retina screen. It is not obvious to not visible on normal screen. 

Some diagnosis. 

https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.js

```
/**
             * Set the cursor type of the canvas element
             * @param {String} value Cursor type of the canvas element.
             * @see http://www.w3.org/TR/css3-ui/#cursor
             */
        setCursor: function(value) {
            this.upperCanvasEl.style.cursor = value;
        },

```

The cursor value is defined by:
https://cdpn.io/bulubin/fullpage/zYJJgxQ?view=

```
function mouseRotateIcon(angle) {
  const relativeAngle = angle - 90;
  const pos = {
    '-90': '9.25 5.25',
    '-75': '9.972 3.863',
    '-60': '10.84 1.756',
    '-45': '11.972 -1.716',
    '-30': '18.83 0.17',
    '-15': '28.49 -9.49',
    15: '-7.985 46.77',
    30: '-0.415 27.57',
    45: '2.32 21.713',
    60: '3.916 18.243',
    75: '4.762 16.135',
    90: '5.25 14.75',
    105: '5.84 13.617',
    120: '6.084 12.666',
    135: '6.317 12.01',
    150: '6.754 11.325',
    165: '7.06 10.653',
    180: '7.25 10',
    195: '7.597 9.43',
    210: '7.825 8.672',
    225: '7.974 7.99',
    240: '8.383 7.332',
    255: '8.83 6.441' },

  defaultPos = '7.25 10';
  const transform = relativeAngle === 0 ?
  'translate(9.5 3.5)' :
  `rotate(${relativeAngle} ${pos[relativeAngle] || defaultPos})`;
  const imgCursor = encodeURIComponent(`
  <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24'>
    <defs>
      <filter id='a' width='266.7%' height='156.2%' x='-75%' y='-21.9%' filterUnits='objectBoundingBox'>
        <feOffset dy='1' in='SourceAlpha' result='shadowOffsetOuter1'/>
        <feGaussianBlur in='shadowOffsetOuter1' result='shadowBlurOuter1' stdDeviation='1'/>
        <feColorMatrix in='shadowBlurOuter1' result='shadowMatrixOuter1' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0'/>
        <feMerge>
          <feMergeNode in='shadowMatrixOuter1'/>
          <feMergeNode in='SourceGraphic'/>
        </feMerge>
      </filter>
      <path id='b' d='M1.67 12.67a7.7 7.7 0 0 0 0-9.34L0 5V0h5L3.24 1.76a9.9 9.9 0 0 1 0 12.48L5 16H0v-5l1.67 1.67z'/>
    </defs>
    <g fill='none' fill-rule='evenodd'><path d='M0 24V0h24v24z'/>
      <g fill-rule='nonzero' filter='url(#a)' transform='${transform}'>
        <use fill='#000' fill-rule='evenodd' xlink:href='#b'/>
        <path stroke='#FFF' d='M1.6 11.9a7.21 7.21 0 0 0 0-7.8L-.5 6.2V-.5h6.7L3.9 1.8a10.4 10.4 0 0 1 0 12.4l2.3 2.3H-.5V9.8l2.1 2.1z'/>
      </g>
    </g>
  </svg>`);
  return `url("data:image/svg+xml;charset=utf-8,${imgCursor}") 12 12, crosshair`;
}
```



That might be related to Bug 160657
Comment 5 Karl Dubost 2023-03-27 23:01:32 PDT
Thanks bulubin8,
This was helpful in understanding the issue.
Comment 6 bulubin8 2023-03-27 23:07:03 PDT
(In reply to Karl Dubost from comment #5)
> Thanks bulubin8,
> This was helpful in understanding the issue.

https://bugs.webkit.org/show_bug.cgi?id=160657. 

It seems that this problem has been going on for a long time, will it be fixed?
Comment 7 Boolat 2023-07-25 02:28:47 PDT
Created attachment 467109 [details]
svg cursor after setting large cursor size in system

Situation is getting worse when we change system cursor size. Looks like at first it converts to raster in original size, then the raster scales to fit the system scale and then this scaled image scales again to fit system cursor scale option.

screenshot is taken from this page: https://b-kamalov-diginavis.github.io/cursor-test/