When the compass points north, it spins 360 degrees each time. Is there any way to stop that behavior?

Question

Frontend is working fine but when it points north every time, it suddenly rotates 360. I made some changes in the handler function but the result goes the same.

  function handler(e) {

    compass = e.webkitCompassHeading || Math.abs(e.alpha - 360);
    compassCircle.style.transform = `translate(-50%, -50%) rotate(${-compass}deg)`;

    // ±15 degree
    if (
      (pointDegree < Math.abs(compass) &&
        pointDegree + 15 > Math.abs(compass)) ||
      pointDegree > Math.abs(compass + 15) ||
      pointDegree < Math.abs(compass)
    ) {
      myPoint.style.opacity = 0;
    } else if (pointDegree) {
      myPoint.style.opacity = 1;
    }
  }

  let pointDegree;

  function locationHandler(position) {
    const { latitude, longitude } = position.coords;
    pointDegree = calcDegreeToPoint(latitude, longitude);

    if (pointDegree < 0) {
      pointDegree = pointDegree + 360;
    }
  }
 

Compass Calculation:

compass = e.webkitCompassHeading || Math.abs(e.alpha - 360);

This line calculates the compass heading based on the device's orientation.

It uses the webkitCompassHeading property if available, which provides the absolute compass heading. Otherwise, it falls back to using e.alpha and ensures a positive value within the range of 0 to 360 degrees.

Updating Compass Visuals:

compassCircle.style.transform = translate(-50%, -50%) rotate(${-compass}deg);

This line updates the CSS transform property of the compass circle element (.compass-circle).

The translate(-50%, -50%) centers the rotation point at the center of the compass, and rotate(${-compass}deg) the compass circle based on the calculated compass heading. This visually simulates a rotating compass needle.

The IF-ELSE Condition:

If the device's orientation is within the specified range, the opacity of a custom point marker (.my-point) is set to 0 (making it invisible).

If the orientation is outside this range, the opacity is set to 1, making the custom point marker visible.

Explanation of the ±15 Degree Range:

The code block checks whether the compass heading is within ±15 degrees of a predefined point (pointDegree). This is likely used to determine if the device is pointing in the right direction with a margin of error of 15 degrees.