dialog: iOS fixed position bug causes dialog to appear off screen

[8-bitTom]

Actual Behavior:

• On actual iOs Devices when opening a dialog into a fixed container sometimes the stretchDialogContainerToViewport function's 'getBoundingClientRect()' returns the windows scroll location instead of 0. This causes the dialog to appear off screen and become un-closeable. Issue stems from a known iOS bug since iOS8 where fixed elements return an improper location while scrolling & the act of clicking inside the touch interface can sometimes cause a scroll. See this for an explination of the behavior: open radar

• mdDialog opening to fixed position should always have a top position of 0 or the top position of the fixed container.

CodePen (or steps to reproduce the issue): *

• http://codepen.io/8bit_tom/pen/mmzYpw
• Happens intermittently as it requires a scroll. Happens 80-90% of the time in my app though.

AngularJS Versions: *

• Angular: 1.6.4
• Material: 1.1.4

Additional Information:

• Browser Type: * Mobile Safari
• Browser Version: * 8+
• OS: * iOS 8+
• Stack Traces:

Proposed Solution
Listen for scroll and debounce stretchDialogContainerToViewport() function (angular material.js line: 10649, dialog.js line: 1173) In my project wrapping the function in a simple 100ms timeout solves the problem 90% of the time

function stretchDialogContainerToViewport(container, options) {
      setTimeout(function(){ //short debounce for ios fixed position while scrolling issue
        var isFixed = $window.getComputedStyle($document[0].body).position == 'fixed';
        var backdrop = options.backdrop ? $window.getComputedStyle(options.backdrop[0]) : null;
        var height = backdrop ? Math.min($document[0].body.clientHeight, Math.ceil(Math.abs(parseInt(backdrop.height, 10)))) : 0;

        var previousStyles = {
          top: container.css('top'),
          height: container.css('height')
        };

        // If the body is fixed, determine the distance to the viewport in relative from the parent.
        var parentTop = Math.abs(options.parent[0].getBoundingClientRect().top);

        container.css({
          top: (isFixed ? parentTop : 0) + 'px',
          height: height ? height + 'px' : '100%'
        });

        return function () {
          // Reverts the modified styles back to the previous values.
          // This is needed for contentElements, which should have the same styles after close
          // as before.
          container.css(previousStyles);
        };
      }, 100);
    };

[derisch]

+1

[fetters5]

+1

[vandercloak]

+1

[vandercloak]

Any cleaner solutions found for this issue yet?

[TheRealSunTzu]

+1

[Splaktar]

If someone from the community was interested in testing, debugging, and submitting a PR for this, then we would gladly review the submission and work to get it merged. That said, this looks like a bug with Safari on iOS and may be outside of the scope of what we can support.

Adding a 100ms timeout that only solves the problem 90% of the time does not seem to be a desirable solution.

[Splaktar]

There is a workaround posted in #10930 (comment) that may be useful here.

[tkserver]

This isn't exclusive to safari on ios. I can reproduce it in chrome on the desktop (mac) and in a cordova app on android. The fix linked above works on the desktop. About to test in devices.

.md-dialog-container {
  height: 100% !important;
  position: fixed !important;
  top: 0px !important;
}

[bucospotter]

This may help you.

.config($provide => {
  'ngInject';
  // return a decorated delegate of the $mdDialog service
    $provide.decorator('$mdDialog', ($delegate, $timeout, $rootElement, $document, $window) => {
      // if a mobile IOS platform
        if ((/iPhone|iPad|iPod/i).test(navigator.userAgent)) {
          const delegate = new mdDialogDelegate($delegate, $timeout, $rootElement, $document, $window);
          // decorate delegate
            return delegate.decorate();
        }
        return $delegate;
    })
});

class mdDialogDelegate {
  constructor($delegate, $timeout, $rootElement, $document, $window) {
    this._$delegate = $delegate;
    this._$timeout = $timeout;
    this._$rootElement = $rootElement;
    this._$document = $document;
    this._$window = $window;
  }
  
  decorate() {
    // $mdDialog.show is our only point of entry that gets called when either a preset (custom or built-in) or a
      // custom object is passed as the options into the $mdDialog service.  So this is the function we need to modify.
      // Keep the original function for now.
      const cachedShowFunction = this._$delegate.show;
      // use the $mdDialog delegate to write a new show function to the $mdDialog service
      this._$delegate.show = opts => {
        // onShowing is an available callback that gets fired just before the dialog is positioned.  We need to add
          // our custom positioning logic to it in order to fix the IOS positioning bug.  In case someone else
          // implements logic in this callback somewhere else, we need to keep it.
          const cachedOnShowingFunction = opts.onShowing;
          // Custom positioning logic added to the onShowing callback
          const onShowing = (scope, element, modifiedOptions) => {
            // the parent can be passed in as a function, string, elmeent, or jqlite object
              // it needs to be assigned as a jqlite object
              let parent = modifiedOptions.parent;
              if (angular.isFunction(parent)) {
                parent(scope, element, modifiedOptions);
              } else if (angular.isString(parent)) {
                parent = angular.element(this._$document[0].querySelector(parent));
              } else {
                parent = angular.element(parent);
              }
              
              // If parent querySelector/getter function fails, or it's just null, find a default.
              // logic derived from angular js material library
              if (!(parent || {}).length) {
                let defaultParent;
                if (this._$rootElement[0] && this._$rootElement[0].querySelector) {
                  defaultParent = this._$rootElement[0].querySelector(':not(svg) > body');
                }
                if (!defaultParent) {
                  defaultParent = this._$rootElement[0];
                }
                if (defaultParent.nodeName === '#comment') {
                  defaultParent = this._$document[0].body;
                }
                parent = angular.element(defaultParent);
              }
              // need to capture the parent top, body height, and parent height before the position dialog logic run
              // in the library
              const parentTop = angular.copy(Math.abs(parent[0].getBoundingClientRect().top));
              const bodyHeight = angular.copy(this._$document[0].body.clientHeight);
              const parentHeight = angular.copy(Math.ceil(Math.abs(parseInt(this._$window.getComputedStyle(parent[0]).height, 10))));
              // after the position dialog logic runs in the library run our custom position dialog logic
              this._$timeout(() => {
                // see if the body is fixed, should have been set to fixed in the library at this point
                  const isFixed = this._$window.getComputedStyle(this._$document[0].body).position === 'fixed';
                  // see if the backdrop has been prepended
                  const backdropElement = parent.find('md-backdrop');
                  // if there is a backdrop make the height of the dialog as the lesser of the body height and parent height
                  const height = backdropElement ? Math.min(bodyHeight, parentHeight) : 0;
                  // apply the top and height positioning of the dialog
                  element.css({
                      top: `${(isFixed ? parentTop : 0)}px`,
                      height: `${height ? `${height}px` : '100%'}`
                  });
              });
              // if there was additional logic added to the onShowing callback, run it
              if (angular.isFunction(cachedOnShowingFunction)) {
                cachedOnShowingFunction(scope, element, modifiedOptions);
              }
          };
          // if a preset was used, assign it to _options, else assign it directly to the options object
          if (opts.constructor.name === 'Preset') {
            opts._options.onShowing = onShowing;
          } else {
            opts.onShowing = onShowing;
          }
          // call the original show function
          cachedShowFunction(opts);
      };
      // return the modified delegated $mdDialog service
      return this._$delegate;
  }
}