Page scrolling not deactivated on Firefox Mobile when panning on fixed overlay div

[tedbarth]

On Firefox Mobile the page scrolling is not deactivated when panning on an fixed, 100% height/width overlay div. All other tested browsers work just fine.

The issue happened on some kind of gallery app. I could isolate the problem again as an example page here (Project has been updated):
https://github.com/tedbarth/hammerjs-demo

If you need more information, please let me know. Thanks for the investigation!

[jongmoon]

@tedbarth Thank you! I'll check it :)

[jongmoon]

@tedbarth I found abnormal behavior in FireFox mobile.

Reason for fail

Despite the Firefox mobile(Android). 62.0.3 supports touch-action, It is invalidated when event listener is registered(by addEventListener).

In your demo, .overlay is styled that touch-action:none by hammer.js. So it should not be handled by browser, which means scroll should be deactivated..

.overlay {
  touch-action: none; // hammer.js sets this value when browser support it.
}

2. But scroll deactivation is invalidated if event is registered as follows.

const overlay = document.querySelector('.overlay');

// following code invalidate behavior of touch-action in FireFox Mobile
overlay.addEventListener("touchstart", e => {
});

It works fine as expected in other browser. But Firefox mobile does not.

Solution ?

It can be solved by making hammer.js call preventDefault on event handler like the way it handles Safari browser(which does not support touch-action:none)

const overlay = document.querySelector('.overlay');

overlay.addEventListener("touchstart", e => {
  e.preventDefault();
});

But I'm not sure is it right to handle it using the browser detection not the feature detection for the exceptional case.

@tedbarth How do you think about it? I would like to hear your advice.

[jongmoon]

Alternative (Temporary)

After some consideration, I found an temporary measure until firefox android fix this issue.

const isAndroidFirefox = /* */;
const overlay = document.querySelector('.overlay');

if (isAndroidFirefox) {
  // hook touchstart event & call preventDefault.
  overlay.addEventListener("touchstart", e => {
    e.preventDefault(); // prevent if direction isn't 'none'
  });
}

const hammer = new Hammer(overlay);
hammer.get('pan').set({direction: Hammer.DIRECTION_ALL});

[tedbarth]

Thanks for the fast investigation! The workaround indeed solves the problem and does not hurt for most of the cases.

I thought about a possible solution and wondered why we cannot use e.preventDefault() per se. I doubt that if one registers a pan, pinch or whatever hammer.js event, you don't want the default behavior on top. There is no "pinch" event the browser could have default behaviors as there is no "pan" behavior the developer expect to get triggered: Those are new events and the only behavior you'd expect is that what you've programmed yourself. I haven't got enough knowledge about event handling in browsers, though. Maybe I'm totally wrong. Maybe there are other use cases I'm just not aware of, but for the moment I think the default behavior could be blocked.

Anyway I would say that for the moment calling preventDefault for Firefox could be hardcoded until there is a fix.

BTW: Some days ago Mozilla released a new Firefox / Firefox Mobile version 63.0.1. Maybe it's already fixed?

[jongmoon]

@tedbarth It would be better to add some explain.

Hammer.js blocks default action(scroll) of touch action. this functionality is working when Hammer.DIRECTION_HORIZONTAL or Hammer.DIRECTION_VERTICAL.. option is used.

There's two way for blocking default action.

1. By specifying touch-action in HTML

• But not all browser support this feature.
• So following is adapted.

2. preventDefault() in touch event handler

• If the browser does not support touch-action, preventDefault() call invalidates page scroll (default action).
• For example Safari browser does not support touch-action.

But In this case, Although FireFox Mobile(Android) supports touch-action, touch-action is not working when event is registered on element. and it seems be a bug of firefox and it's still not fixed latest release(https://www.mozilla.org/en-US/firefox/android/63.0/releasenotes/)

preventDefault() is not related with custom event of hammer.js. it is just for touch event to prevent page scrolled.

And I'll report it firefox bug report.

[jongmoon]

I reported it on firefox bug report

• https://bugzilla.mozilla.org/show_bug.cgi?id=1506497

[WoodNeck]

Closing this issue due to inactivity.