[BUG] Application does not respond on iOS when having 2 instances

[sneko]

Describe the bug

Hi @yoannmoinet , this is more for record since I already saw some people complaining on being stuck on iOS without any reason.

In my case I'm using Vue.js and I have 2 pages where I use a joystick (inside a web component):

• the first page/component is cached (thanks to keep-alive tag)
• the second one is not, so it's fully reloaded each time

When I first went to the first page, then the second one, I get indeed 2 instances of joysticks and as soon I start moving the one of the second page, any other element of my page (button, menu...) was not responding anymore.

My joysticks are in the static mode

Since caching could have been an issue (events not unsubscribed...), I tried to put 2 joysticks on the same page but I get the same issue when touching one of them.

After trying to fix that for hours, I found a workaround... I need to force unbinding the document when a joystick triggers the end event.

Like that:

        this.joystick.on('end', (event: any) => {
          if (platform === 'ios') {
            event.target.manager.unbindDocument(true);
          }
        });

That's only working by setting true to force unbinding.

https://github.com/yoannmoinet/nipplejs/blob/master/src/manager.js#L109-L118

While looking at the function, it would mean the function is not passing the condition about !Object.keys(self.ids).length... but I don't understand why. This is not iOS specific so I don't understand why this is happening.

I'm sorry not having more information about this strange behavior 😢

BTW, you did a great job 👍 that's an awesome library 👏

Smartphone (please complete the following information):

• iOS 11.x

Additional context

• Tried Nipple.js 0.8.0 and 0.8.2

[yoannmoinet]

Thank you very much for the very detailed report!
It's really helpful, I'll check it out when I have some time.
In the meantime, feel free to look it up too.

[oliverlife]

I encounter the problem in IOS, too.
The reason is Manager.prototype.unbindDocument is not passing the condition about !Object.keys(self.ids).length.

During Using joystick,

1. Manager.prototype.removeIdentifier Call count is Equal Manager.prototype. getIdentifier Call count
2. Manager.prototype.unbindDocument Call count is Equal Manager.prototype.bindDocument Call count
   that's all right.

But when create joystick that time is before using joystick, Manager.prototype.getIdentifier has be called. So,

1. before first call Manager.prototype.bindDocument, the Object.keys(self.ids).length already has be greater than 1.
2. after using joystick, the Object.keys(self.ids).length will be greater than 1.
   After using joystick call Manager.prototype.unbindDocument, the unbindEvt will not call.

In my iOS device, when bind(doucment, 'move') and bind(doucment, 'end'), other control (example: button) does not respond in my application.

[oliverlife]

1.what's fix plan of the bug?
2.I use typescript, so maybe we should export all function of Manager class/interface, so I can used method like sneko to avoid the bug.