Modal content not scrolling on iOS Safari

[collegetransitions]

To Reproduce
Steps to reproduce the behavior:

1. On an iPhone, go to https://vue.chakra-ui.com/modal#modal-overflow-behavior
2. Click on "Open Modal" button
3. Attempt to scroll content using 1 finger
4. Content does not scroll

Expected behavior
Content should scroll when using one finger, with momentum.

Smartphone

• Device: iPhone (any)
• OS: Tested on iOS 14
• Browser: Mobile Safari

Additional context
Modal focus locking & scrolling seem to be handled by v-scroll-lock, a Vue wrapper around body-scroll-lock, which has an issue that may be the cause of this bug: willmcpo/body-scroll-lock#207

[collegetransitions]

Update: I got past this issue by following an [example from body-scroll-lock](https://github.com/willmcpo/body-scroll-lock#options to look for a body-scroll-lock-ignore attribute and allow touch events within that element.

Vue.use(VScrollLock, {
  enableBodyScroll,
  disableBodyScroll,
  bodyScrollOptions: {
    allowTouchMove: el => {
      while (el && el !== document.body) {
        if (el.getAttribute('body-scroll-lock-ignore') !== null) {
          return true;
        }
  
        el = el.parentElement;
      }
    },
  },
})

and then adding 'body-scroll-lock-ignore': true, to the ModalContent attrs.