diff --git a/src/components/main/Main.tsx b/src/components/main/Main.tsx index 544f82118..2675d94e5 100644 --- a/src/components/main/Main.tsx +++ b/src/components/main/Main.tsx @@ -27,6 +27,7 @@ import useShowTransition from '../../hooks/useShowTransition'; import useBackgroundMode from '../../hooks/useBackgroundMode'; import useBeforeUnload from '../../hooks/useBeforeUnload'; import useOnChange from '../../hooks/useOnChange'; +import usePreventIosPinchZoom from '../../hooks/usePreventIosPinchZoom'; import { processDeepLink } from '../../util/deeplink'; import { LOCATION_HASH } from '../../hooks/useHistoryBack'; @@ -222,6 +223,8 @@ const Main: FC = ({ useBackgroundMode(handleBlur, handleFocus); useBeforeUnload(handleBlur); + usePreventIosPinchZoom(isMediaViewerOpen); + function stopEvent(e: React.MouseEvent) { e.preventDefault(); e.stopPropagation(); diff --git a/src/hooks/usePreventIosPinchZoom.ts b/src/hooks/usePreventIosPinchZoom.ts new file mode 100644 index 000000000..63c19d507 --- /dev/null +++ b/src/hooks/usePreventIosPinchZoom.ts @@ -0,0 +1,21 @@ +import { useEffect } from '../lib/teact/teact'; +import { IS_IOS } from '../util/environment'; + +export default function usePreventIosPinchZoom(isDisabled = false) { + // Disable viewport zooming on iOS Safari + useEffect(() => { + if (!IS_IOS || isDisabled) { + return undefined; + } + + document.addEventListener('gesturestart', preventEvent); + + return () => { + document.removeEventListener('gesturestart', preventEvent); + }; + }, [isDisabled]); +} + +function preventEvent(e: Event) { + e.preventDefault(); +} diff --git a/src/index.html b/src/index.html index 0d741ab81..4ee5eedd9 100644 --- a/src/index.html +++ b/src/index.html @@ -3,7 +3,7 @@ - +