Pinch Zoom Alters MouseEvent.clientX and MouseEvent.clientY

Description

I have a circular cursor (created from a div element) and an event listener that sets the position of the cursor to the position of the mouse (using MouseEvent.clientX and MouseEvent.clientY) when the mouse moves on the document.

Problem

When I pinch-zoom in on my Mac in Safari (to zoom in on the region around my cursor) and move my mouse, the updated clientX and clientY values suddenly jump, causing the cursor to disappear; when I relocate the cursor, the custom cursor then fails to move at an identical speed to my mouse (when I move my mouse from the left edge of the screen to the right edge of the screen, the cursor moves from the left edge and ends in the middle of the screen). When I pinch-zoom out to see the cursor, the cursor does not jump but continues to fail to move at an identical speed to my mouse.

When pinch-zooming in Chrome, Opera, or Firefox and subsequently moving my mouse, the clientX and clientY values suddenly jump, but the cursor does not disappear (all three browsers "follow" the new updated position of the cursor). The custom cursor also moves at an identical speed to my mouse.

Expected Result

1. I would like the cursor to remain in the same position for all browsers; although Chrome, Opera, and Firefox will "follow" the new updated position of the cursor, I do not want the cursor to move in the first place.

2. I would like the cursor to move at an identical speed to my mouse for all browsers (my cursor fails to do so in Safari, for some reason)

Code

Attached below is a minimal reproducible example of my problem. The cursor seems to work fine in the snippet, but the below code produces the stated problem in a live server.

const cursor = document.querySelector("#cursor");
document.addEventListener("mousemove", cursorPosition)
function cursorPosition(e) {
    cursor.style.display = "block";
    cursor.style.left = e.clientX + "px";
    cursor.style.top = e.clientY + "px";
}

:root {
    cursor: none;
}

body {
    margin: 0;
}

#cursor {
    pointer-events: none;
    position: fixed;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid black;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    z-index: 2;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../CSS/Test.css">
    <script src="../../JS/Test.js" async></script>
    <title>Document</title>
</head>
<body>
    <div id="cursor"></div>
</body>
</body>
</html>

Thanks in advance.