[Webkit-unassigned] [Bug 160657] New: Custom CSS cursor (any format) is blurry, especially with a large OS X system cursor size

[bugzilla-daemon at webkit.org]

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

            Bug ID: 160657
           Summary: Custom CSS cursor (any format) is blurry, especially
                    with a large OS X system cursor size
    Classification: Unclassified
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: Macintosh
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: seriouslyicy at gmail.com

Created attachment 285563
  --> https://bugs.webkit.org/attachment.cgi?id=285563&action=review
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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.webkit.org/pipermail/webkit-unassigned/attachments/20160808/a272dadf/attachment.html>