iOS 11.4 Safari not respecting 'touch-action: manipulation'

Question

I encountered a problem with a React web app I'm trying to build cross-platform. Basically, I just wanted to be able to interact with a div via a double-click on desktop, and a double-tap on mobile.

However, on iOS (I'm specifically targeting the latest 11.4 version of Safari), the double-tap always results in a 'double tap to zoom' behavior.

From my research, I discovered that using touch-action: manipulation in my css should solve the problem, and is even supposed to be supported by Safari on iOS (https://caniuse.com/#feat=css-touch-action).

However, I made a super-simple react project, and no matter what, double-tapping on the blue div always zooms.

I'm hoping I'm just missing something, so if anyone could enlighten me, it would be appreciated!

Here's my super simple react project hosted in GitHub: https://github.com/erlloyd/touch-action-bug, and here's the relevant code:

App Component

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
      </div>
    );
  }
}

export default App;

App.css

.App {
  width: 100px;
  height: 100px;
  margin-left: 10px;
  margin-top: 10px;
  background: blue;
  touch-action: manipulation;
}

Relevant meta tags:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Answer 1

The last couple of comments on the original WebKit feature request might be useful to you.

...what's happening in that example is that since the touch-action: manipulation div is not clickable, we skip that node when trying to find a clickable element for the touch. To verify this, add an onclick to the div with touch-action manipulation and touches on it should turn fast.

This page shows that the property does seem to apply when the object is clickable, and in testing I can see that the double-tap to zoom behaviour doesn't occur on the "manipulation" box.

Adding an onClick to your div should do the trick, for example:

class App extends Component {
  render() {
    return (
      <div className="App" onClick={e => e.preventDefault()}>
      </div>
    );
  }
}