Skip to content
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

Closed
mbeneto opened this issue Apr 18, 2016 · 6 comments
Closed

Possible bug when changing orientation? #30

mbeneto opened this issue Apr 18, 2016 · 6 comments

Comments

@mbeneto
Copy link

mbeneto commented Apr 18, 2016

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!

@yoannmoinet
Copy link
Owner

Hi,
thanks for reporting this.

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.

@mbeneto
Copy link
Author

mbeneto commented Apr 19, 2016

Hi,
thanks for your fast reply.

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:
Another interesting behaviour that maybe is useful for figuring out what's happening is the next. After getting blocked as described, looks like buttons get disconnected from their handlers (I mean, buttons are still clickable but they doesn't work). Is possible to check this trying to select the mode in the demo (dynamic, semi and static buttons). Again, this issue is only detected in iOS, buttons remain operative in Android after the orientation change.

@yoannmoinet
Copy link
Owner

Sorry for the LONG delay.
Reading your update, I'd say that there is a Javascript Error when changing the orientation of the phone.
I'll look into that soon.
Thanks again for your reporting.

@adriancabouli
Copy link

touchcancel event it fix the problem!,

$(document).on('touchcancel', function(event) {
REMOVE_AND_CREATE_JOYSTIC() // or whatever...
});

@rhenaldkarrel
Copy link

touchcancel event it fix the problem!,

$(document).on('touchcancel', function(event) { REMOVE_AND_CREATE_JOYSTIC() // or whatever... });

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",
  });
}, []);

@rhenaldkarrel
Copy link

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;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants