-
Notifications
You must be signed in to change notification settings - Fork 186
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Possible bug when changing orientation? #30
Comments
Hi, Did you see any errors (in the console) while doing so? I'm sorry I can't really test it right now, as I'm changing country / job / life and these past weeks have not been really free for me 😫 Anyway, I'll look into this as soon as possible, it might not be before 2-3 weeks. |
Hi, I tried to remotely debug it using Safari and iOS but no error is shown in the console. By the way, I forgot to point it in the first message, but I tried it in several navigators (Safari, Chrome, Firefox...) and also different platforms (iPad and Android tablets) obtaining the next behaviour: iPad: Crash as reported in Safari/Chrome/Firefox. Android: Works* in Chrome/Firefox. *The button gets frozen in the position it was when the orientation changed, but is possible to recover the control pressing over the object again. It looks like is some issue related with iOS. I also tried with different versions, a fully updated iPad an other running an old iOS version, but both have the same behaviour. If you have an iPad with you and you have 2 free minutes, I'd ask you to try it in the demo page, is a very fast test, and will help me to know if it's just my fault or is something else. :) Otherwise, keep back in touch in some weeks. Ah, good luck in your moving! Update: |
Sorry for the LONG delay. |
touchcancel event it fix the problem!, $(document).on('touchcancel', function(event) { |
Hello, I reproduce the same issue now in my app. Would you please tell the exact code for how to fix this? I am using react and here is my code useEffect(() => {
const joystick = nipplejs.create({
zone: document.querySelector(".joystick"),
mode: "static",
position: { left: "50%", bottom: "50%" },
color: "#0000ff",
});
}, []); |
Sorry, I just understand what you mean and have resolved this. Just in case, my solution was like this more or less: let joystick : nipplejs.JoystickManager;
const resetJoystick = () => {
joystick.destroy();
joystick = nipplejs.create({
zone: document.querySelector(".joystick"),
mode: "static",
position: { left: "50%", bottom: "50%" },
color: "#0000ff",
});
};
const Page = () => {
useEffect(() => {
joystick = nipplejs.create({
zone: document.querySelector(".joystick"),
mode: "static",
position: { left: "50%", bottom: "50%" },
color: "#0000ff",
});
window.addEventListener("resize", resetJoystick); // recreate when viewport changed
window.addEventListener("orientationchange", resetJoystick); // recreate when orientation changed
return () => {
window.removeEventListener("resize", resetJoystick);
window.removeEventListener("orientationchange", resetJoystick);
}
}, [])
...
};
export default Page; |
Hi!
First of all, thanks for your contribution, it's being very useful in my project. Second, I'm kind of newbie in web design, so please, bear with me if this is just my fault and not a real bug!
I realized that when using a virtual joystick (in static mode) in a tactile device, if you perform a window rotation in the precise moment you are also pressing the joystick, the object gets frozen and it's impossible to use it again. I tried to .destroy() the joystick object when detecting a window.onorientationchange event, and then inject it again, but apart from not elegant, that created me some other problem with other elements event/handlers.
I am the only one who has experienced that behaviour? I also tried it in the demo web-page and I had the same issue. Any idea to workaround this?
Thanks!
The text was updated successfully, but these errors were encountered: