Custom cursor is reset to top left of page every time a new page is loaded

Question

I have a custom cursor on my site that is working perfectly apart from one thing. When clicking through to a new page, when the page loads the cursor resets itself to the top left of the page regardless of where you leave the mouse on the page, then once you moved the mouse the cursor moves back to where the mouse is. I have tried removing "top" & "left" from the CSS but the problem remains. I cant see what is causing this to happen, and I just need the cursor to stay where the mouse is positioned on the page and not reset every time you navigate to a new page.

jQuery(document).ready(function($) {
let cursor = document.querySelector('#custom-cursor');

    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
    $('#custom-cursor').remove();
}
else { cursor.style.display = 'block';}

document.addEventListener('mousemove', evt => {
    
  let { clientX: x, clientY: y } = evt;
  let scale = 1;
  
  if (evt.target.matches('a,span,[onclick],img,video,i')) {
    cursor.classList.add('active');
    scale = 0.5;
  } else {
    cursor.classList.remove('active');
  }
  
  cursor.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;
  
});
});

* {
  cursor: none;
}

#custom-cursor {
  display: none;
  position: fixed;
  width: 20px; height: 20px;
  top: -10px;
  left: -10px;
  border: 2px solid black;
  border-radius: 50%;
  opacity: 1;
  background-color: #fb4d98;
  pointer-events: none;
  z-index: 99999999;
  transition:
    transform ease-out 0.15s,
    border 0.5s,
    opacity 0.5s,
    background-color 0.5s;
}
#custom-cursor.active {
  opacity: 0.5;
  background-color: #000;
  border: 2px solid #fb4d98;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="custom-cursor"></div>

Answer 1

Use ordinary CSS cursor as shown in the other answer and replace it with you fancy cursor in the first mouse event:

jQuery(document).ready(function($) {
  let cursor = document.querySelector('#custom-cursor');

  document.addEventListener('mousemove', evt => {
    document.body.classList.add('custom-cursor-moved')

    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
      $('#custom-cursor').remove();
    } else {
      cursor.style.display = 'block';
    }


    let {
      clientX: x,
      clientY: y
    } = evt;
    let scale = 1;

    if (evt.target.matches('a,span,[onclick],img,video,i')) {
      cursor.classList.add('active');
      scale = 0.5;
    } else {
      cursor.classList.remove('active');
    }

    cursor.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;

  });
});

body {
  height: 100vh;
}

html,
body {
  margin: 0;
  padding: 0;
}

* {
  cursor: url(https://i.sstatic.net/7pmmV.png) 0 0, auto;
}

.custom-cursor-moved,
.custom-cursor-moved * {
  cursor: none !important;
}

#custom-cursor {
  display: none;
  position: fixed;
  width: 20px;
  height: 20px;
  top: -10px;
  left: -10px;
  border: 2px solid black;
  border-radius: 50%;
  opacity: 1;
  background-color: #fb4d98;
  pointer-events: none;
  z-index: 99999999;
  transition: transform ease-out 0.15s, border 0.5s, opacity 0.5s, background-color 0.5s;
}

#custom-cursor.active {
  opacity: 0.5;
  background-color: #000;
  border: 2px solid #fb4d98;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="custom-cursor"></div>

Try me.<br> Try me.

It needs a bit of modifications (better cursor image, fix it hotspot etc.) but it works.

Be very, very careful when doing such thing. Try to not break any accessibility tools and please do not assume that Android/some specific user-agent HAS touchscreen, etc.. Use proper APIs.

Answer 2

Use CSS cursor property instead:

html {
  cursor: url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196) 0 0, auto;
  height: 100%;
}

Try me.