Custom cursor is pixelating on Windows OS

user_2799834 0
Viewed 363

I have implemented custom cursor, but it looks pixelated(specially 1366 * 768 resolution) on Windows Chrome (didn't check on Mac OS). you can see the code snippet here:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled</title>
    <meta name="description" content="This is an example of a meta description.">
    <style>
        body {
            cursor: -webkit-image-set( url("https://i.imgur.com/gbSYdYW.png") 1x, url("http://i.imgur.com/vf3qXmT.png") 2x) 0 0, auto;
        }
    </style>
  </head>
  <body>
    Testing
  </body>
</html>

Also i changed png to svg image, but got no success. Any suggestion would be appreciated.

Please find the stack snippet for the same:

 body {
            width: 999px;
            height: 500px;
            cursor: -webkit-image-set( url("https://i.imgur.com/gbSYdYW.png") 1x, url("http://i.imgur.com/vf3qXmT.png") 2x) 0 0, auto;
        }
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled</title>
    <meta name="description" content="This is an example of a meta description.">
  </head>
  <body>
    Testing
  </body>
</html>

text-cursor chromium css html javascript
3 Answers

body{

  width: 600px;
  height: 500px;
cursor:-webkit-image-set( url(http://www.ivank.net/veci/crosshair.png) 5x  ) 40 40, auto;
}
<body style="">

-webkit-image-set( url(http://www.ivank.net/veci/crosshair.png) 5x  ) 40 40, auto;

</body>

I found one more solution, that is working fine, as you required:

http://www.ivank.net/veci/cursors_dpr.html

Have a look.

I am not sure how Cursor image-set is working, but I doubt it is not working with absolute URL, as per my observation, image-set URL is working with static URI. But I tried to change the Static URI with Absolute URL and it worked well too.

Please have a look, this might help you more.

PS: image URL http://www.ivank.net/veci/crosshair.png

user_51086950

okay this is different approach to use custom cursor

// find elements
$(function () {
  $("#testarea").mousemove(function (e) {
    $(".cursor").show().css({
      "left": e.clientX,
      "top": e.clientY
    });
  }).mouseout(function () {
    $(".cursor").hide();
  });
});
#testarea {
  border: 1px dashed #ccc;
  height: 100px;
  cursor: none;
}
.cursor {
  position: absolute;
  width: 25px;
  height: 25px;
  left: -100px;
  cursor: none;
  pointer-events: none;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div id="testarea"></div>
<img src="https://i.imgur.com/gbSYdYW.png" alt="Cursor" class="cursor" />

user_51086950

Okay try this, it's working fine for me.

cursor implementation in css can be done like following format

cursor: url("http://i.imgur.com/vf3qXmT.png"), url("http://i.imgur.com/vf3qXmT.png"), default;

Not like this:

    cursor: -webkit-image-set( url("https://i.imgur.com/gbSYdYW.png") 1x, url("http://i.imgur.com/vf3qXmT.png") 2x) 0 0, auto;

Have a look to the following code snippet.

    
 body {
            width: 999px;
            height: 500px;
cursor: url("http://i.imgur.com/vf3qXmT.png"), url("http://i.imgur.com/vf3qXmT.png"), default;
        }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Custom Cursor</title>
</head>
<body>

</body>
</html>

user_51086950
Related