From 397ba5c8c2f8f8d7440b663f67dc4b4bd99a7f61 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 7 Sep 2022 12:32:46 +0200
Subject: [PATCH] Improve iOS scroll locking (#1830)

* use a simpler `position: fixed` approach to prevent scroll locking

This isn't super ideal, but just preventing the default behavior on the
entire document while `touchmove`-ing isn't ideal either because then
you can't scroll inside the dialog or on the backdrop if your dialog
panel is larger than the viewport.

Again, this is not 100% correct, but it is better because you will be
able to scroll the dialog, and not the body.

* update changelog
---
 packages/@headlessui-react/CHANGELOG.md              |  4 +++-
 .../src/components/dialog/dialog.tsx                 | 12 +++---------
 packages/@headlessui-vue/CHANGELOG.md                |  4 +++-
 .../@headlessui-vue/src/components/dialog/dialog.ts  | 12 +++---------
 4 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index 8ccdac3..63f1e2f 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Improve iOS scroll locking ([#1830](https://github.com/tailwindlabs/headlessui/pull/1830))
 
 ## [1.7.0] - 2022-09-06
 
diff --git a/packages/@headlessui-react/src/components/dialog/dialog.tsx b/packages/@headlessui-react/src/components/dialog/dialog.tsx
index fa7255b..5d70ca5 100644
--- a/packages/@headlessui-react/src/components/dialog/dialog.tsx
+++ b/packages/@headlessui-react/src/components/dialog/dialog.tsx
@@ -119,16 +119,10 @@ function useScrollLock(ownerDocument: Document | null, enabled: boolean) {
     }
 
     if (isIOS()) {
-      d.addEventListener(
-        ownerDocument,
-        'touchmove',
-        (e) => {
-          e.preventDefault()
-        },
-        { passive: false }
-      )
-
       let scrollPosition = window.pageYOffset
+      style(documentElement, 'position', 'fixed')
+      style(documentElement, 'marginTop', `-${scrollPosition}px`)
+      style(documentElement, 'width', `100%`)
       d.add(() => window.scrollTo(0, scrollPosition))
     }
 
diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md
index 1877a60..38cc81f 100644
--- a/packages/@headlessui-vue/CHANGELOG.md
+++ b/packages/@headlessui-vue/CHANGELOG.md
@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Improve iOS scroll locking ([#1830](https://github.com/tailwindlabs/headlessui/pull/1830))
 
 ## [1.7.0] - 2022-09-06
 
diff --git a/packages/@headlessui-vue/src/components/dialog/dialog.ts b/packages/@headlessui-vue/src/components/dialog/dialog.ts
index 7f21c78..2be4781 100644
--- a/packages/@headlessui-vue/src/components/dialog/dialog.ts
+++ b/packages/@headlessui-vue/src/components/dialog/dialog.ts
@@ -249,16 +249,10 @@ export let Dialog = defineComponent({
       }
 
       if (isIOS()) {
-        d.addEventListener(
-          owner,
-          'touchmove',
-          (e) => {
-            e.preventDefault()
-          },
-          { passive: false }
-        )
-
         let scrollPosition = window.pageYOffset
+        style(documentElement, 'position', 'fixed')
+        style(documentElement, 'marginTop', `-${scrollPosition}px`)
+        style(documentElement, 'width', `100%`)
         d.add(() => window.scrollTo(0, scrollPosition))
       }