Search code examples
retinamouse-cursor

SVG mouse cursor blurry on Retina display


I'm using a custom SVG cursor on my webpage and it appears to be blurry on Retina screens. Is this a common issue?


Solution

  • I've run into the same issue. My workaround involves using jQuery to follow the mouse position with an SVG div:

    $(document).mousemove(function(e){
    $("#cursor").css({left:e.pageX, top:e.pageY});
    

    but this has one issue of its own which I haven't resolved - it does not follow the mouse position as you scroll like the css option does

    jQuery: https://jsfiddle.net/jhhbrook/ucuLefut/ CSS: https://jsfiddle.net/0chzmhrd/