影响iOS中固定位置元素的溢出限制的解决方法？

Question

编辑：主要问题是：溢出：隐藏和溢出：自动影响iOS中固定定位的元素。

因此，如果我在页面的滚动功能中的组件中有一个固定的模态对话框，则该元素不会显示在超出其父级边界的任何位置。这真的搞砸了，因为它不是固定定位在任何其他系统上的工作方式。那么官方对此有何回应？

原帖：

我有一个模式对话框，可以在桌面和Android上正常工作，但在iPad上的任何浏览器上，模态对话框（包括模态叠加层）都会隐藏在超出其父容器边界的任何位置（即使它已修复）定位）。我知道这不是溢出：auto应该工作，因为它在所有其他设备上都能正常工作。有人经历过这个吗？我确定它与iOS如何处理固定位置有关。

无论如何，这里有一些代码：

HTML：

<confirm-dialog ng-if="$ctrl.confirmDlgShowing" on-close="$ctrl.closeDlgs()" on-confirm="$ctrl.deleteInstance()" class="ng-scope ng-isolate-scope">
    <div class="modal general modal"><div class="modal-window"><div class="modal-inner" ng-transclude="">
       <div style="position:relative" class="ng-scope">
        <label class="modal-close" ng-click="$ctrl.onClose()"></label>
        <div class="page-heading">
            <h2>Are you sure?</h2>
        </div>
            <input class="btn" type="button" value="Yes" ng-click="$ctrl.confirm()">
            <input class="btn" type="button" value="No" ng-click="$ctrl.onClose()">
        </div>
    </div></div></div>
</confirm-dialog>

SASS：

.container {
     overflow: auto;

.modal-window { 
// overlay
   @include transition(opacity 0.25s ease);
   @include position(fixed, 0px 0px 0px 0px);
   background: rgba(0,0,0, 0.6);
   padding-top: 0.6em;
   text-align: left;
   z-index: 999999999;
   margin: 0 !important;
   .modal-bg {
      @include position(absolute, 0px 0px 0px 0px);
      cursor: pointer;
   }
} 


.modal-inner {
  @include transition(opacity 0.25s ease);
  background: $modal-background;
  border-radius: $base-border-radius;
  display: table;
  margin: 70px auto;
  max-height: 80%;
  overflow: auto;
  padding: $modal-padding / 2;
  z-index: 1000000000;
  min-width: 400px;

  @media(max-width: $medium-screen) {
     max-height: 70%;
     padding: $modal-padding;
  }
 }
}

Answer 1

这里是我们最终提出的解决方法 - 一个新的指令，用于替换将对象放在主体上的模态上的ng-if。与其他Angular绑定很好地配合使用。

angular.module('app').directive('rootIf', function()
{
   return { 
      restrict: 'A',
      link: function (scope, $elm, attrs)
         {
         scope.$watch(attrs.rootIf, onChangeRootIf);

         function onChangeRootIf()
            {
            if (scope.$eval(attrs.rootIf))
               $("body").children().first().before($elm);
            else
               $elm.detach();
            }
         }
      }
});