Некорректно работает увеличение картинки на 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;
}
Подскажите, в чем может быть проблема? Гугл весь излазил.