Webkit-overflow-scrolling: touch freezes a modal with longer content in IOS 10

Viewed 1030

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

}
0 Answers
Related