Hammer.JS, CSS touch-action and iOS Safari context menu

If you long press on image in iOS Safari (7, 8) after 500 ms you’ll get context menu (sometimes called “callout”). This menu give you “Save image” and “Copy image” actions.

I’ve faced some issues with this behaviour when implementing image viewer component with Hammer.JS 2.0.4

hammer.js rocks or raps...

hammer.js rocks or raps…

First of all turned out that Hammer.JS can set touch-action: none CSS rule on DOM node with specific recognizers (pinch, rotate) and uses polyfill for unsupported platforms such as iOS Safari 8.1.

touch-action: none; prevents showing of context menu. It’s not documented side effect of this style in iOS Safari 8.1 and Android Chrome 34. touch-action has no effect on context menu in most other browsers.

Second problem was that Hammer.JS also put -webkit-touch-callout: none on DOM node. The only purpose of this style is to prevent showing iOS Safari’s context menu.

I needed pinch recognizer for image size manipulation, but I also needed to show context menu on long tap on image. So that’s how I made this to work:

1. Remove setting of -webkit-touch-callout: none style on DOM node:

var mc = new Hammer.Manager(this.domElem[0], {
    cssProps: _.assign(Hammer.defaults.cssProps, { touchCallout: '' }),
    doNotPreventPress: true
});

2. Modified hammer.js sources to disable preventing touch event on long tap. Watch the commit in my fork of hammer.js.

Still my commit looks like a dirty hack so I’ll investigate in this problem in the future.