Bug 160657 – Custom CSS cursor (any format) is blurry, especially with a large OS X system cursor size

• Component: CSS
• Status: NEW

[Isaac Sukin]

Created attachment 285563 [details]
A ZIP file containing a demonstration of the problem

This might be the same issue as https://bugs.chromium.org/p/chromium/issues/detail?id=325565 but I think it's different enough to warrant discussion here. I have searched and was unabled to find any other similar issues.

I have tested in Chrome 51 on OSX 10.11, Safari 9.1 on OSX 10.11, and Chrome 53 on Windows 10. (My devicePixelRatio on OS X is 2 - a retina screen.) This does not happen in Firefox 47 or 48 on OSX 10.11, but a variant happens in Firefox 48 on Windows 10. (I wasn't able to get custom cursors to work at all in IE 11 or Edge 13 - may have been an issue with the cursor size being too big.)

Basically, it looks like custom cursors get rendered to a raster and scaled up, resulting in aliasing. On Macs (but not on Windows) changing the cursor size in the system preferences (Accessibility > Cursor size) causes custom cursors to display bigger, which makes the problem much more obvious. You can see this particularly in the lines crossing the target in the attached example; they should be sharp black lines with white edges, but instead they're just a muddled gray.

I have confirmed that the image can be made slightly crisper by changing the size to 63x63px instead of 64x64px so that the cross-lines are aligned on a single pixel.

Additionally, viewing the SVG image directly in a Webkit browser renders it crisply.

For an illustration, compare the attached demo in Webkit and Firefox on OS X. In Firefox it's crisp and in Webkit it's blurry. The left pane in the demo uses an SVG cursor and the right pane uses a CUR cursor; both exhibit the same behavior.

[Isaac Sukin]

Oops, the attached demo actually uses the SVG cursor in both panes, but you can change the index.html source to see that the same effect happens regardless of cursor format (just change "cursor.svg" to "cursor.cur").

[Jon Lee]

rdar://problem/10413916

[Ahmad Saleem]

From below Blink Commit - https://chromium.googlesource.com/chromium/src.git/+/463f5a9838f4352dd4ab3c7aae8a9d32ee7fd26b

We can merge this part but SVGImage.cpp and SVGImage.h changes are related to Skia library and I don't know whether we can merge it 1-1.

EventHandler.cpp: https://searchfox.org/wubkat/source/Source/WebCore/page/EventHandler.cpp#1543