<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Custom CSS cursor (any format) is blurry, especially with a large OS X system cursor size"
href="https://bugs.webkit.org/show_bug.cgi?id=160657">160657</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Custom CSS cursor (any format) is blurry, especially with a large OS X system cursor size
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>WebKit Nightly Build
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Macintosh
</td>
</tr>
<tr>
<th>OS</th>
<td>Unspecified
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>CSS
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>seriouslyicy@gmail.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=285563" name="attach_285563" title="A ZIP file containing a demonstration of the problem">attachment 285563</a> <a href="attachment.cgi?id=285563&action=edit" title="A ZIP file containing a demonstration of the problem">[details]</a></span>
A ZIP file containing a demonstration of the problem
This might be the same issue as <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=325565">https://bugs.chromium.org/p/chromium/issues/detail?id=325565</a> 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.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>