I have a strange problem with webkit-overflow-scrolling: touch property in IOS 10 - when the modal has longer content it gets 'stucked' or 'frozen' and not scrollable.
First of all, I prevented the pinch zooming on the modal with JavaScript because I thought it caused the problem - no effect.
I've also tried all the suggested fixes I could find, and still when the modal is longer, sometimes (not every time) it gets stucked when has been scrolled.
This behaviour definitely comes from the webkit-overflow-scrolling: touch property, because when I remove it or set it to auto, the modal doesn't freeze but the scrolling becomes awful - not smoothly at all.
Could someone suggest me a fix? Any help will be greatly appreciated.
This is part of the code:
.body.modal-open {
position: fixed;
width: auto;
overflow: hidden;
}
.modal-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 2500;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;
&::before {
content: '';
display: inline-block;
height: 100%;
}
.modal {
position: relative;
display: inline-block;
width: 550px;
z-index: 3000;
}
}