nipplejs
nipplejs copied to clipboard
yoannmoinet
[BUG]does not match the location of the click
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/[email protected]/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.
Thanks a ton for this very detailed bug report.
Full disclosure, I'm currently working on a complete rewrite of the library, you can tag along here in https://github.com/yoannmoinet/nipplejs/pull/221.
I'll keep an eye on it and see if I can reproduce in the v1 rewrite.
