Merge pull request #434 from eych/fix/zoom_behavior_and_overlay_heigh…

…t_in_safari

Fixes for the zoom behaviour and overlay height in iOS Safari

CONTRIBUTING.md

@@ -7,7 +7,7 @@
     ```
     $ git remote add upstream git@github.com:rpearce/react-medium-image-zoom.git
     $ git fetch upstream
-    $ git rebase upstream/master
+    $ git rebase upstream/main
     ```
 1. Check out a feature branch
     ```
@@ -19,12 +19,12 @@
     $ git push origin my-feature
     ```
 1. Create a [pull request](https://help.github.com/articles/about-pull-requests/)
-   from your branch to this repo's `master` branch
-1. When all is merged, pull down the upstream changes to your `master`
+   from your branch to this repo's `main` branch
+1. When all is merged, pull down the upstream changes to your `main`
     ```
-    $ git checkout master
+    $ git checkout main
     $ git fetch upstream
-    $ git rebase upstream/master
+    $ git rebase upstream/main
     ```
 1. Delete your feature branch (locally and then on GitHub)
     ```

source/Controlled.tsx

@@ -346,7 +346,7 @@ class ControlledBase extends Component<ControlledPropsWithDefaults, ControlledSt
     this.refModalImg.current?.removeEventListener?.('transitionend', this.handleUnzoomEnd)
     window.removeEventListener('wheel', this.handleWheel)
     window.removeEventListener('touchstart', this.handleTouchStart)
-    window.removeEventListener('touchend', this.handleTouchMove)
+    window.removeEventListener('touchmove', this.handleTouchMove)
     window.removeEventListener('touchcancel', this.handleTouchCancel)
     window.removeEventListener('resize', this.handleResize)
     document.removeEventListener('keydown', this.handleKeyDown, true)
@@ -515,6 +515,9 @@ class ControlledBase extends Component<ControlledPropsWithDefaults, ControlledSt
    * Unzoom on wheel event
    */
   handleWheel = (e: WheelEvent) => {
+    // don't handle the event when the user is zooming with ctrl + wheel (or with pinch to zoom)
+    if (e.ctrlKey) return
+
     e.stopPropagation()
     queueMicrotask(() => {
       this.handleUnzoom()
@@ -581,7 +584,7 @@ class ControlledBase extends Component<ControlledPropsWithDefaults, ControlledSt
 
     window.addEventListener('wheel', this.handleWheel, { passive: true })
     window.addEventListener('touchstart', this.handleTouchStart, { passive: true })
-    window.addEventListener('touchend', this.handleTouchMove, { passive: true })
+    window.addEventListener('touchmove', this.handleTouchMove, { passive: true })
     window.addEventListener('touchcancel', this.handleTouchCancel, { passive: true })
     document.addEventListener('keydown', this.handleKeyDown, true)
 
@@ -609,7 +612,7 @@ class ControlledBase extends Component<ControlledPropsWithDefaults, ControlledSt
 
     window.removeEventListener('wheel', this.handleWheel)
     window.removeEventListener('touchstart', this.handleTouchStart)
-    window.removeEventListener('touchend', this.handleTouchMove)
+    window.removeEventListener('touchmove', this.handleTouchMove)
     window.removeEventListener('touchcancel', this.handleTouchCancel)
     document.removeEventListener('keydown', this.handleKeyDown, true)
 

source/styles.css

@@ -55,9 +55,9 @@
 [data-rmiz-modal][open] {
   position: fixed;
   width: 100vw;
-  width: 100svw;
+  width: 100dvw;
   height: 100vh;
-  height: 100svh;
+  height: 100dvh;
   max-width: none;
   max-height: none;
   margin: 0;