Fix: stop ontouchstart events on overlay

src/js/utils/cleanup.js

@@ -1,5 +1,5 @@
 import { defer } from 'lodash';
-import { classNames as modalClassNames } from './modal';
+import { classNames as modalClassNames, preventModalBodyTouch } from './modal';
 import { getElementForStep } from './dom';
 
 /**
@@ -45,6 +45,7 @@ export function cleanupStepEventListeners() {
   if (typeof this._onScreenChange === 'function') {
     window.removeEventListener('resize', this._onScreenChange, false);
     window.removeEventListener('scroll', this._onScreenChange, false);
+    window.removeEventListener('touchmove', preventModalBodyTouch, false);
 
     this._onScreenChange = null;
   }

src/js/utils/dom.js

@@ -1,3 +1,5 @@
+import { preventModalBodyTouch, preventModalOverlayTouch } from './modal';
+
 /**
  * Helper method to check if element is hidden, since we cannot use :visible without jQuery
  * @param {HTMLElement} element The element to check for visibility
@@ -78,6 +80,13 @@ function addStepEventListeners() {
 
   window.addEventListener('resize', this._onScreenChange, false);
   window.addEventListener('scroll', this._onScreenChange, false);
+
+  const overlay = document.querySelector('#shepherdModalOverlayContainer');
+  // Prevents window from moving on touch.
+  window.addEventListener('touchmove', preventModalBodyTouch, false);
+
+  // Allows content to move on touch.
+  overlay.addEventListener('touchmove', preventModalOverlayTouch, false);
 }
 
 /**

src/js/utils/modal.js

@@ -137,6 +137,14 @@ function getModalMaskOpening(modalElement) {
   return modalElement.querySelector(`#${elementIds.modalOverlayMaskOpening}`);
 }
 
+function preventModalBodyTouch(event) {
+  event.preventDefault();
+}
+
+function preventModalOverlayTouch(event) {
+  event.stopPropagation();
+}
+
 /**
  * Remove any leftover modal target classes and add the modal target class to the currentElement
  * @param {HTMLElement} currentElement The element for the current step
@@ -154,6 +162,8 @@ function toggleShepherdModalClass(currentElement) {
 export {
   createModalOverlay,
   positionModalOpening,
+  preventModalBodyTouch,
+  preventModalOverlayTouch,
   closeModalOpening,
   getModalMaskOpening,
   elementIds,