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

Question

编辑:主要问题是:overflow: hidden 和 overflow: auto affect fixed positioned elements in iOS.

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

原帖:

我有一个模态对话框在桌面和 Android 上运行良好，但在我的 iPad 上的任何浏览器上，模态对话框(包括模态叠加层)在超出其父容器边界的任何地方都会隐藏(即使它是固定的定位)。我知道这不是 overflow: 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，将对象放置在 body 上。也可以很好地与其他 Angular 绑定(bind)配合使用。

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