解决溢出限制影响iOS中固定位置元素的解决方法? [英] Workaround for overflow restriction affecting fixed-positioned elements in iOS?

问题描述

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

So if I have a fixed positioned modal dialog in a component within a scrolling feature of the page, that element is not displayed wherever it exceeds the bounds of its parent. This is really messed up, as it's not how fixed positioning works on any other system. So what's the official response to this?

我有一个模态对话框，在桌面和Android上都可以正常工作，但是在我的iPad上的任何浏览器上，无论模态对话框(包括模态叠加层)超出其父容器的边界(即使它是固定的)，都将被隐藏定位).我知道这不是溢出的原因:自动应该可以工作，因为它在所有其他设备上都可以正常工作.还有其他人经历过吗?我确定它与iOS如何处理固定位置有关.

I have a modal dialog that works fine on desktop and Android, but on any browser on my iPad, the modal dialog, including the modal overlay, gets hidden wherever it exceeds the boundaries of its parent container (even though it is fixed positioned). I know that this isn't how overflow: auto is supposed to work, because it works just fine on all other devices. Anyone else experienced this? I'm sure it has something to do with how iOS handles fixed positions.

无论如何，这是一些代码:

Anyway, here's some code:

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

推荐答案

这是我们最终想出的解决方法-一种新指令，用于在模型上替换ng-if，以将对象放置在身体上.也可以与其他Angular绑定一起很好地玩.

Here's the workaround we finally came up with--a new directive to replace ng-if on our modals that places the object on the body. Plays nicely with other Angular bindings too.

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

这篇关于解决溢出限制影响iOS中固定位置元素的解决方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！