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;
   }

}

      

+3


source to share





All Articles