Некорректно работает увеличение картинки на iOS

При открытии картинки, остальные элементы можно скроллить и их видно.

Проблема возникает только на iOS устройствах, на андройде или на windows все замечательно

Сам скрипт ниже

 console.log('скрипт стартовал');
const oOverlays = document.querySelectorAll('.t851__overlay');
if (oOverlays.length) {
  oOverlays.forEach(oOverlay=>{
     oOverlay.addEventListener('click', function(ev)  {
      console.log('КЛИК ПОЛУЧЕН');
      let oAncestor = ev.target.closest('.t851__button-bottom');
      let oParent = ev.target.closest('.t396__elem ');
      let oBig = oParent.appendChild(document.createElement('DIV'));
      let oTarget = oAncestor ? oAncestor.querySelector('meta[itemprop="image"]') : undefined;
      if (oTarget) {
        let nWidth, nHeight, nRatio, nPaddingTop;
        nWidth = this.offsetWidth;
        nHeight = this.offsetHeight;
        nRatio = nWidth / nHeight;
        nPaddingTop = nRatio * 100;
        oBig.classList.add('_oBig');
        oBig.style.position = 'fixed';
        oBig.style.top = '0';
        oBig.style.left = '0';
        oBig.style.width = '100vw';
        oBig.style.overflowY = 'auto';
        oBig.style.overflowX = 'hidden';
        oBig.style.webkitOverflowScrolling = 'touch';
oBig.style.paddingTop = ((oParent.offsetHeight - nHeight) / 4) + 'px';
// oBig.style.paddingBottom = ((oParent.offsetHeight - nHeight) / 2) + 'px';
oBig.style.paddingLeft = oTarget.offsetLeft + 'px';
oBig.style.paddingRight = oTarget.offsetLeft + 'px';
        oBig.style.zIndex = '999999';
        oBig.style.background = '#000';
        oBig.style.pointerEvents = 'all';
        oBig.style.display = 'flex';
        oBig.style.justifyContent = 'center';
        oBig.style.alignItems = 'flex-start';
        oParent.style = 'pointer-events:none;z-index: 999999999999;position: relative;';
        oParent.classList.add('_mhz-glropen');
        oBig.style.maxHeight = '100vh';
        oBig.style.maxWidth = '100%';
        document.body.style.overflow = 'hidden';
        if (navigator.userAgent.match(/(iPhone|iPod)/)) {
  oBig.style.height = '100vh';
}
        if (nHeight < nWidth) {
          nHeight = this.offsetHeight;
          nWidth = nHeight * nRatio;
        } else {
          nWidth = this.offsetWidth;
          nHeight = nWidth / nRatio;
        };
        oBig.style.minHeight = nHeight+'px';
        let imageUrl = oTarget.getAttribute("content");
        oBig.insertAdjacentHTML('beforeend', '<img src="'+imageUrl+'" class="oBig_image"></img>');
        oBig.insertAdjacentHTML('beforeend', '<div class="close">×</div>');
        oBig.querySelector('.close').addEventListener('click', function(ev) {
          ev.stopPropagation();
          oBig.addEventListener('transitionend', function() { 
            this.remove(); 
            oParent.style = '';
            document.body.style.overflow = '';
            oParent.classList.remove('_mhz-glropen');
          });
          oBig.style.removeProperty('overflow-x');
          oBig.style.removeProperty('overflow-y');
          oBig.style.webkitTransition = 'all .0001s ease-in';
          oBig.style.width = '0px';
          ev.target.closest('.t851__overlay').classList.toggle('show', false);
        });
        oBig.addEventListener('transitionend', function() { this.querySelector('.close').style.opacity = 1; });
        oBig.addEventListener('click', function(ev) {
          ev.stopPropagation();
          this.addEventListener('transitionend', function() { 
            this.remove(); 
            oParent.style = '';
            document.body.style.overflow = '';
            oParent.classList.remove('_mhz-glropen');
          });
          oBig.style.removeProperty('overflow-x');
          oBig.style.removeProperty('overflow-y');
          this.style.webkitTransition = 'all .0001s ease-in';
          this.style.width = '0px';
          ev.target.closest('.t851__overlay').classList.toggle('show', false);
        });
      }
    });
  });
}

Сайт : https://noizrum.ru/landing-page-development

Стили

.oBig_image {
    max-width:80%;
    height: auto;
    <meta name="viewport" content="width=device-width, initial-scale=1">
      touch-action: pan-y;
}
.t851__bg{
    background-position:initial;
}

.oBig {
  opacity: 0;
  transition: opacity .5s ease-in-out;
  -webkit-overflow-scrolling: touch;
}
.close {
    font-size:50px;
    color:white;
    padding-left:50px;
    position:fixed;
    right:20%;
}
@media screen and (max-width:960px) {
    .close {
        padding-left:10px;
    }
    .oBig_image {
        
  display: block;
  margin: auto;
  .oBig {
  /* ... */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* ... */
}
.close {
    right:0;
}

Подскажите, в чем может быть проблема? Гугл весь излазил.


Ответы (0 шт):