Webkit-overflow-scrolling: touch freezes modal content with longer content in IOS 10
I have a weird webkit-overflow-scrolling: touch scrolling issue in IOS 10 - when a modal has longer content, it gets "stuck" or "frozen" and won't scroll.
First of all, I prevented the scalable scaling of modal JavaScript because I thought it was causing the problem - no effect.
I've also tried all the suggested fixes I could find, and yet when the modal is longer, sometimes (not every time) it gets stuck on scrolling.
This behavior definitely comes from the webkit-overflow-scroll: touch property , because when I remove it or set it to auto, the modal value doesn't freeze, but the scrolling gets terrible - not at all smooth.
Can anyone suggest me a fix? Any help would 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;
}
}
source to share
No one has answered this question yet
Check out similar questions: