Search code examples
htmlcssimagegoogle-chromecursor

Cursor property with custom url not displaying correctly in Chrome

I am using the CSS cursor property with custom images specified with URLs.

However, when doing this on Chrome, white dots appear around the cursor image.

If we look at the image below, you can see the problem on google chrome.

enter image description here enter image description here

This does not happen on other browsers. Such as firefox:

enter image description here enter image description here

Here is the link to the cursor images used: https://i.sstatic.net/tikyJ.jpg

I thought originally that the issue would be that semi-transparency is used in the image. But the image has no semi-transparency at all.

What is going on here, and how would I fix something like this?

Thanks.

Solution

  • I tried to reproduce this example using Chrome 52.0 on Mac OS X 10.11, but I am not seeing the jagged white edges. Does this snippet show the jagged white edges for you?

    .cursor-test {
  height: 200px;
  width: 100%;
}

#cursor-test-1 {
  background-color: red;
  cursor: url('http://i.imgur.com/jaYSPxo.png'), auto;
}

#cursor-test-2 {
  background-color: blue;
  cursor: url('http://i.imgur.com/aFU13SN.png'), auto;
}
    <div id="cursor-test-1" class="cursor-test"></div>
<div id="cursor-test-2" class="cursor-test"></div>

    Update: Here's an animated gif screenshot of how it looks for me. I attempted to capture a regular screenshot, but OS X seems to hide custom CSS cursors in screenshots.

    custom cursor hover