iOS: scroll lock should still allow pinch-to-zoom

singingwolfboy · singingwolfboy · commit d36e77f78fc6 · 2025-01-01T12:33:04.000+01:00
diff --git a/packages/@headlessui-react/src/hooks/document-overflow/handle-ios-locking.ts b/packages/@headlessui-react/src/hooks/document-overflow/handle-ios-locking.ts
@@ -83,7 +83,9 @@ export function handleIOSLocking(): ScrollLockStep<ContainerMetadata> {
 
               d.style(rootContainer, 'overscrollBehavior', 'contain')
             } else {
-              d.style(e.target, 'touchAction', 'none')
+              // Disable all touch actions related to scrolling,
+              // but still allow pinch-to-zoom.
+              d.style(e.target, 'touchAction', 'pinch-zoom')
             }
           }
         })
diff --git a/packages/@headlessui-vue/src/hooks/document-overflow/handle-ios-locking.ts b/packages/@headlessui-vue/src/hooks/document-overflow/handle-ios-locking.ts
@@ -83,7 +83,9 @@ export function handleIOSLocking(): ScrollLockStep<ContainerMetadata> {
 
               d.style(rootContainer, 'overscrollBehavior', 'contain')
             } else {
-              d.style(e.target, 'touchAction', 'none')
+              // Disable all touch actions related to scrolling,
+              // but still allow pinch-to-zoom.
+              d.style(e.target, 'touchAction', 'pinch-zoom')
             }
           }
         })

Original file line number	Diff line number	Diff line change
`@@ -83,7 +83,9 @@ export function handleIOSLocking(): ScrollLockStep<ContainerMetadata> {`
`83`	`83`
`84`	`84`	`d.style(rootContainer, 'overscrollBehavior', 'contain')`
`85`	`85`	`} else {`
`86`		`- d.style(e.target, 'touchAction', 'none')`
	`86`	`+ // Disable all touch actions related to scrolling,`
	`87`	`+ // but still allow pinch-to-zoom.`
	`88`	`+ d.style(e.target, 'touchAction', 'pinch-zoom')`
`87`	`89`	`}`
`88`	`90`	`}`
`89`	`91`	`})`