[BUG]does not match the location of the click #222
Description
Describe the bug
In the Nipplejs implementation within my project, there is an issue where the direction of the joystick does not match the location of the click. When I click on the joystick area (the container with the ID joystick-container), the joystick's movement direction seems to be offset from where I actually clicked, which leads to an inaccurate control experience.
(ps:If resize the window ,the problem disappear.)
To Reproduce
Steps to reproduce the behavior:
- Open the provided HTML file (the code is as follows) in a text editor:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>nipplejs Demo</title>
<script src="https://cdn.jsdelivr.net/npm/nipplejs@0.9.0/dist/nipplejs.min.js"></script>
<style>
#joystick-container {
width: 500px;
height: 500px;
background-color: #f0f0f0;
border: 1px solid #ccc;
position:absolute;
}
</style>
</head>
<body>
<div id="joystick-container"></div>
<script>
window.onload = function () {
const container = document.getElementById('joystick-container');
const joystick = nipplejs.create({
zone: container,
mode: 'static',
position: { left: '50%', top: '50%' },
color: 'blue'
});
};
</script>
</body>
</html>Expected behavior
When clicking on different areas within the joystick-container div, the joystick should move in the direction that corresponds to the location of the click.
Screenshots, Codepen or JSFiddle
Desktop (please complete the following information):
- Browser: Microsoft Edge
Additional context
This issue only seems to occur in the Microsoft Edge browser on Windows. I haven't had the chance to test it on other browsers or operating systems yet. The project is a simple implementation of Nipplejs with basic configuration for creating a static joystick. There are no additional custom scripts or styles that might interfere with the normal operation of Nipplejs.