I ran into an issue while developing a React web app that I want to work seamlessly across different platforms. My goal was to allow users to interact with a div element by double-clicking on desktop and double-tapping on mobile devices.
However, when testing the app on iOS (specifically targeting Safari version 11.4), every double-tap triggered a 'double tap to zoom' action instead of interacting with the div as intended.
After some investigation, I learned that using touch-action: manipulation in my CSS should resolve this problem, as it is supposed to be supported by Safari on iOS (https://caniuse.com/#feat=css-touch-action).
To test this solution, I created a simple React project, but unfortunately, the issue persisted regardless of the implementation.
I'm hoping for some insights from the community to help me figure out what I might be overlooking. Any assistance would be greatly appreciated!
You can find my straightforward React project on GitHub here: https://github.com/erlloyd/touch-action-bug, along with the relevant code snippets:
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">