From a2ce6bb081c8175a8385d23f9ad2a5a5f519db80 Mon Sep 17 00:00:00 2001
From: Valentin Hervieu <valentin@hervi.eu>
Date: Sat, 23 Jun 2018 14:42:35 +0200
Subject: [PATCH] Prevent Safari Mobile to zoom the page when trying to zoom
 the image

---
 src/index.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/index.js b/src/index.js
index 423f64e..19e8e7e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,6 +6,7 @@ const MAX_ZOOM = 3
 
 class Cropper extends React.Component {
   image = null
+  container = null
   imageSize = { width: 0, height: 0, naturalWidth: 0, naturalHeight: 0 }
   dragStartPosition = { x: 0, y: 0 }
   dragStartCrop = { x: 0, y: 0 }
@@ -17,10 +18,12 @@ class Cropper extends React.Component {
 
   componentDidMount() {
     window.addEventListener('resize', this.computeSizes)
+    this.container.addEventListener('gesturestart', this.preventZoomSafari)
   }
 
   componentWillUnmount() {
     window.removeEventListener('resize', this.computeSizes)
+    this.container.removeEventListener('gesturestart', this.preventZoomSafari)
     this.cleanEvents()
   }
 
@@ -30,6 +33,9 @@ class Cropper extends React.Component {
     }
   }
 
+  // this is to prevent Safari on iOS >= 10 to zoom the page
+  preventZoomSafari = e => e.preventDefault()
+
   cleanEvents = () => {
     document.removeEventListener('mousemove', this.onMouseMove)
     document.removeEventListener('mouseup', this.onDragStopped)
@@ -237,6 +243,7 @@ class Cropper extends React.Component {
         onMouseDown={this.onMouseDown}
         onTouchStart={this.onTouchStart}
         onWheel={this.onWheel}
+        innerRef={el => (this.container = el)}
       >
         <Img
           src={this.props.image}