Search code examples
javascriptangularjssvgios8mobile-safari

Adding apple-mobile-web-app-capable stops SVG touches being recognised

I'm trying to add touch functionality to an SVG.

I recognise the touch event using a jQuery like selector. (I'm actually using angular JQLite - angular.element()):

 .on("mousedown touch", function(event) {

On my desktop and in mobile Safari, there's no issue. The touches are recognised correctly. It also responds correctly when saved as a bookmark, but when I include:

  <meta name="apple-mobile-web-app-capable" content="yes" />

in my header, and save to the home screen.. the touch piece doesn't respond.

I'm wondering whether anybody knows the root cause of this or has a a workaround? I'm using Angular 1.2.27 and iOS 8

Solution

  • For info, I worked around the issue by embedding an ng-click within the SVG itself.

    This would tend to point to angulars JQLite implementation of click/moousedown/touchstart being the cause or possibly not supporting the same touch events as ng-click.