Webkit溢出滚动:触摸在IOS 10中冻结具有更长内容的模式

Jul*_*lsy 5 css scroll webkit modal-dialog ios

我对webkit-overflow-scrolling有一个奇怪的问题:在IOS 10中触摸属性 - 当模态具有更长的内容时,它会被"卡住"或"冻结"而不能滚动.

首先,我用JavaScript阻止了对模态的缩放缩放,因为我认为它导致了问题 - 没有效果.

我也尝试了所有我能找到的建议修复,但是当模态更长时,有时(不是每次)它都会在滚动时被卡住.

这个行为肯定来自webkit-overflow-scrolling:touch属性,因为当我删除它或将其设置为auto时,模态不会冻结但滚动变得很糟糕 - 根本不顺利.

有人可以建议我修复一下吗?任何帮助将不胜感激.

这是代码的一部分:

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

}
Run Code Online (Sandbox Code Playgroud)