Прокрутка модального окна блокируется на мобильных устройствах. В чем ошибка?

Question

[Solevoy_2015]

Написал модальное окно, которое подстраивается под количество контента и включает возможность его прокрутки при переполнении через overflow в css. Работает все отлично, но есть небольшой баг или возможно мой косяк, если пролистать контент в модальном окне до конца (низа) убрать палец и начать пытаться листать вниз, то прокрутка просто блокируется. Приходится зажимать повторно для прокрутки вверх. Пытался отследить элемент на который приходится нажатие, вдруг оно проходит вообще сквозь модальное окно, но у меня не получилось, mousedown работает иначе в режиме Device Mode.
Элемент за модальным окном я фиксирую, он двигаться не может. Помигите)

React component модалка

import React from 'react'
import stylePopup from './popup.module.css'
import { bodyFixed, bodyStatic } from './EventModal';
import MyButton from '../UI/Button/MyButton';

const PopupModal = (props) => {
    const popupModalRef = React.useRef()
//запрещаю прокрутку для body
    bodyFixed()

    const onClose = () => {
        props.onClose()
//разрешаю прокрутку для body
        bodyStatic()
    }

    return (
        <div className={`${stylePopup['modal']}`}>
            <div className={stylePopup['modal__body__wrapper']}>
                <div className={stylePopup['modal__body']} ref={popupModalRef}>
                    <div className={stylePopup['modal__title']}>{props.title}</div>
                    <div className={stylePopup['modal__content']}>
                        {props.content}
                    </div>
                    <div className={stylePopup['modal__close']}>
                        <button onClick={() => {onClose()}}>Закрыть</button>
                    </div>
                </div>
            </div>
//фон, при нажатии закрывает модалку
            <div className={stylePopup['modal-background']} onClick={() => {onClose()}}></div>
        </div>
    )
};

export {PopupModal}

React app

import { useRef, useState } from 'react';
import style from './app.module.css'
import { PopupModal } from './components/Popup/Popup';

function App() {

  const Info = () => {
    return (
      <div className={style['info']}>
          <div className={style['info__item']}>
              <div className={style['info__item__title']}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo beatae quisquam quas minima et magnam repellat odit dolores illum dolorum?</div>
              <div className={style['info__item__text']}>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi doloremque ut debitis consequuntur facere nam voluptatem tempore aut. Praesentium eius amet unde, natus doloremque, dicta dolor, quam itaque laborum nesciunt exercitationem vero iste. Assumenda tempora dolore placeat labore quisquam fuga.
              </div>
          </div>
          <div className={style['info__item']}>
              <div className={style['info__item__title']}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo beatae quisquam quas minima et magnam repellat odit dolores illum dolorum?</div>
              <div className={style['info__item__text']}>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi doloremque ut debitis consequuntur facere nam voluptatem tempore aut. Praesentium eius amet unde, natus doloremque, dicta dolor, quam itaque laborum nesciunt exercitationem vero iste. Assumenda tempora dolore placeat labore quisquam fuga.
              </div>
          </div>
          <div className={style['info__item']}>
              <div className={style['info__item__title']}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo beatae quisquam quas minima et magnam repellat odit dolores illum dolorum?</div>
              <div className={style['info__item__text']}>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi doloremque ut debitis consequuntur facere nam voluptatem tempore aut. Praesentium eius amet unde, natus doloremque, dicta dolor, quam itaque laborum nesciunt exercitationem vero iste. Assumenda tempora dolore placeat labore quisquam fuga.
              </div>
          </div>
          <div className={style['info__item']}>
              <div className={style['info__item__title']}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo beatae quisquam quas minima et magnam repellat odit dolores illum dolorum?</div>
              <div className={style['info__item__text']}>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi doloremque ut debitis consequuntur facere nam voluptatem tempore aut. Praesentium eius amet unde, natus doloremque, dicta dolor, quam itaque laborum nesciunt exercitationem vero iste. Assumenda tempora dolore placeat labore quisquam fuga.
              </div>
          </div>
          <div className={style['info__item']}>
              <div className={style['info__item__title']}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo beatae quisquam quas minima et magnam repellat odit dolores illum dolorum?</div>
              <div className={style['info__item__text']}>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi doloremque ut debitis consequuntur facere nam voluptatem tempore aut. Praesentium eius amet unde, natus doloremque, dicta dolor, quam itaque laborum nesciunt exercitationem vero iste. Assumenda tempora dolore placeat labore quisquam fuga.
              </div>
          </div>
          <div className={style['info__item']}>
              <div className={style['info__item__title']}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo beatae quisquam quas minima et magnam repellat odit dolores illum dolorum?</div>
              <div className={style['info__item__text']}>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi doloremque ut debitis consequuntur facere nam voluptatem tempore aut. Praesentium eius amet unde, natus doloremque, dicta dolor, quam itaque laborum nesciunt exercitationem vero iste. Assumenda tempora dolore placeat labore quisquam fuga.
              </div>
          </div>
      </div>
    )
  }


  return (
    <div className={style['App']}>
        <button onClick={() => setModal(true)}>Открыть описание</button>
       
        {modal && 
        <PopupModal
          title='Описание'
          content={
            <Info/>
          }
          onClose={() => setModal(false)}
        />
        }
     
    </div>
  );
}

export default App;

css app

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: #333;
    width: 100%;
}
.App {
    width: 100%;
    max-width: 425px;
    padding: 0 15px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Item */
.info {
    width: 100%;
}
.info__item {
    margin: 10px 0;
}
.info__item__title {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 10px;
}
.info__item__text {
    font-size: 14px;
    font-weight: 400;
    color: #333;
}

css popup

/* Popup Mobile Modals */
.modal {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    z-index: 3050;
}
.modal-background {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: var(--vb-bl-opacity-3);
    transition: all 0.5s;
    z-index: 1;
    -webkit-animation: modal-backgr 0.5s;
    animation: modal-backgr 0.5s;
}
.modal__body__wrapper {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    display: block;
}
.modal__body {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    border-radius: 12px 12px 0 0;
    max-height: 95%;
    display: flex;
    flex-direction: column;
    width: 100%;
    z-index: 2;
    -webkit-animation: modal-content 0.3s;
    animation: modal-content 0.3s;
}
.modal__title {
    padding: 10px 15px;
    color: #000;
    font-weight: 500;
    font-size: var(--vb-font-mobile-title);
    border-bottom: 1px solid var(--vb-grey-ed);
}
.modal__content {
    display: block;
    padding: 0 15px 50px;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
}
.modal__content::-webkit-scrollbar {
    display: none;
}
.modal__close {
    width: 100%;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: end;
    position: fixed;
    bottom: 5px;
    left: 0;
}
.modal__close button {
    flex: 0 0 120px;
    padding: 10px 15px !important;
}

@keyframes modal-backgr {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes modal-content {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0%);
    }
}

Comments

[strelok011]

Для лиги лени - а какое устройство у вас себя так ведет?
У меня стойкое ощущение, что это не к ночи будь помянут айфон, соответственно двигло сафари под капотом и здравствуй ж. новый год - "скролл фона под позишн фиксед или позишн абсолют"

[Solevoy_2015]

strelok011, у айфона при таком скролле меняется значение у window.scrollY (скроллится непосредственно window), а у андроидов нет, но также скролл блочится. Выяснил через ивент 'touchstart', что currentTarget = window, и при попытке скролла вниз, браузер перекидывает скролл на него. Есть ли возможность этого избежать в моем случае?

[strelok011]

Solevoy_2015, как вариант - оверфлоу хидден на боди, чтобы событие не возникало?

[Solevoy_2015]

strelok011, body при открытии окна получает следующий атрибут: style="position: fixed; overflow: hidden; top: -13px;" , где top = window.scrollY в момент открытия модального окна.

[strelok011]

еще вариант css pointer-events none

[Solevoy_2015]

strelok011, на что?

[strelok011]

на боди, туда куда тыкать не должно

[Solevoy_2015]

strelok011, нельзя, окно будет не кликабельно, оно же в body