Back to all questions

It is not possible to pinch to zoom when Modal is opened. What should I do?

Last updated

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 removeScrollProps prop:

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

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