Hammer.js: pan not working iOS, works on everything else.

Created on 16 Dec 2016  路  5Comments  路  Source: hammerjs/hammer.js

Hi all, I am currently using HammerJs for a project at work. As of a month ago everything was working fine on the dev site. Yesterday however, after we pushed to the live site we immediately received complaints that our dashboard could not be swiped on mobile. We checked Android and Desktop, both work fine. But on iOS products nothing happens when a user tries to swipe(pan). Any ideas?

The code I used comes directly from the HammerJs pan example on their website. I took that code, filled in my own jQuery selectors and it worked just fine. The only thing I can think of is that it doesn't work with iOS10? Because that seems to be the only thing that changed between when it was working and now.

Any help would be greatly appreciated. Not looking forward to a rollback if I can't fix this.

Thanks

Most helpful comment

I was having a problem very like this one - turned out it was because of a difference in how block elements with white-space: nowrap are rendered on desktop vs mobile.

on desktop, the element will have a width equal to the sum of its children - it extends across its entire contents. on mobile, it's width was equal to 100% of its parent. as i what i was doing was a carousel, moving the carousel sufficiently far over put the element i was triggering off outside of the view port, and so any events on it weren't firing because as far as the browser was concerned i was touching nowhere near it. moving the events to the parent element solved the problem with no other changes to the code.

All 5 comments

We are also having this issue with our website. It just mysteriously started to not work on iOS. Neither chrome or safari on iOS work for panning. Everything else works. It appears that after the first pan happens the listener just crashes and it no longer works. Here is an example of one of our pages that is not working. https://www.stlukesonline.org/communities-and-locations/facilities/clinics/st-lukes-mountain-states-tumor-institute--boise Any help would be greatly appreciated. I've been stuck on this issue for quite some time now.

Some of the steps I've taken. Update to latest version of hammer, isolating the code away from all other javascript. Reinitialize the listener as a desperate band aid fix but of course makes it worse.

I was having a problem very like this one - turned out it was because of a difference in how block elements with white-space: nowrap are rendered on desktop vs mobile.

on desktop, the element will have a width equal to the sum of its children - it extends across its entire contents. on mobile, it's width was equal to 100% of its parent. as i what i was doing was a carousel, moving the carousel sufficiently far over put the element i was triggering off outside of the view port, and so any events on it weren't firing because as far as the browser was concerned i was touching nowhere near it. moving the events to the parent element solved the problem with no other changes to the code.

I had the same problem because I imported pepjs into my polyfil.js
when I remove the import everything works again

So what`s the exact solution for this problem now? Thanks.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

julmot picture julmot  路  9Comments

terion-name picture terion-name  路  10Comments

tenphi picture tenphi  路  4Comments

anselmh picture anselmh  路  10Comments

priyankaviswan picture priyankaviswan  路  5Comments