Ember.js: Actions not firing in iOS 9.3

[jrdn91]

So I started getting some calls today about users of my app not able to do a few things in Safari or even mobile Chrome.

After some investigation I found that anything that has an action attached to it was not firing it's action at all.

I made sure I didn't have any hammer.js or other fast-click type polyfills installed and cleared out all caches to make sure it wasn't an addon and did not find relief.

I posted in the slack channel, and @runspired had mentioned a few things

Safari has a large number of known traps

and 9.3 has changes that will affect those traps

- changed viewport meta behavior
- now has touch-action support

known traps include
- elements that need click must have `pointer: cursor;` in their styles if not a button/anchor

- focus/hover styles will prevent click firing for the first 1/2 taps as focus/hover states will be activated first

if you are using ember-hammertime, theoretically you are already ok for 9.3, but if you are using it and things are going wrong then please open an issue on hammer-time so Alex knows to dig into 9.3 issues

I tested adding cursor:pointer (fixed typo from his comment) to an element that had an action applied to it and after opening the localhost on my device, both Safari and Chrome now allowed the action to take place on that element only.

I added this line to my app.scss file

/*
 * iOS 9.3 fix
*/
[data-ember-action] {
    cursor: pointer;
}

And now anything that was previously not working worked fine.

(note before testing this fix I found that only elements with actions on them were not working, links generated with the link-to helper where transitioning pages just fine.)

My versions are as follows...

Ember: 2.2.1
Ember-Data: 2.2.0
jQuery: 2.1.4
iOS: 9.3
Latest version of chrome for iPhone: 49.0.2623.73
Latest version of safari included with iOS 9.3

[runspired]

This doesn't count as an Ember bug, and I will be adding something to ember-hammertime to account for this Safari bug.

In general, Safari (and other mobile browsers) have required that cursor: pointer; be defined on the element for some time in order to trigger click behavior.

It appears that what happened here is that pre Safari 9.3, the hammer-time touch-action polyfill enabled "fast click" for Safari. But since Safari 9.3 has (some) support for touch-action now, the polyfill is not activated on 9.3, revealing a Safari 9.3 specific implementation bug: you must still have cursor: pointer; in your CSS even when touch-action is defined.

The general solution is to do as @Jordan4jc did, which was already a best practice:

[data-ember-action], a, .link {
  cursor: pointer;
}

In ember-hammertime, I will be updating the AST Walker to add cursor: pointer; automatically alongside the touch-action CSS for elements that need to be able to be interacted with.

[runspired]

ember-hammertime 1.0.2 has been released with a fix for Safari 9.3

https://github.com/runspired/ember-hammertime