Pinch To Zoom Modal

import { Layout } from '@/layout';

export const meta = { title: 'It is not possible to pinch to zoom when a Modal is opened. What should I do?', description: 'Use removeScrollProps to configure react-remove-scroll options', slug: 'pinch-to-zoom-modal', category: 'components', tags: ['modal', 'drawer', 'zoom', 'lockScroll', 'scroll lock'], created_at: 'February 15, 2024', last_updated_at: 'February 15, 2024', };

export default Layout(meta);

The Modal and Drawer components use react-remove-scroll to lock scroll when they are opened. By default, react-remove-scroll will lock scroll and prevent pinch-to-zoom on mobile devices. To change various scroll lock options, you can use the removeScrollProps prop:

import { Modal } from '@mantine/core';

function Demo() {
  return (
    <Modal
      removeScrollProps={{
        allowPinchZoom: true, // Allow pinch-to-zoom on mobile devices
      }}
    >
    </Modal>
  );
}