Back to all questions

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

Last updated

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 content */}
    </Modal>
  );
}