paper-dialog in Polymer doesn't close in iPhone

Question

I use this example from the doc of polymer

 <paper-dialog>
    <h2>Header</h2>
    <paper-dialog-scrollable>
        Lorem ipsum...
    </paper-dialog-scrollable>
    <div class="buttons">
     <paper-button dialog-dismiss>Cancel</paper-button>
     <paper-button dialog-confirm>Accept</paper-button>
   </div>
</paper-dialog>

In every browser the dialog closes when I click on place that is not the dialog, But on iPhone IOS 8.4 it doesn't work. I can't close the dialog.

How can I solve this problem?

Tingly

Answer 1

I know there is a Z-index issue with Safari on IOS. Likely the paper-dialog is not at the top like it should be. You may need a -webkit prefix to the class when it's using IOS.

Silverpoint

can you give me please code example? I tried put z-index : 1000; but this don't work. – Tingly

Answer 2

After some research, I found the issue on the polymer Github, and there is a way to hack it so it works:

    _finishRenderOpened: function() {
  // focus the child node with [autofocus]
  if (!this.noAutoFocus) {
    this._focusNode.focus();
  }

  if(this.withBackdrop) {
    this.parentNode.insertBefore(this._backdrop, this);
  }

  this.fire('iron-overlay-opened');

  this._squelchNextResize = true;
  this.async(this.notifyResize);
},

(code by https://github.com/dhpollack)

"To implement dhpollack's hack in a nice way, add this function to your custom element:

patchOverlay: function (e) {
    if (e.target.withBackdrop) {
        e.target.parentNode.insertBefore(e.target._backdrop, e.target);
    }
},

And add on-iron-overlay-opened="patchOverlay" to all your <paper-dialog>'s"

(implementation by https://github.com/rubenstolk)

Github issue: https://github.com/PolymerElements/paper-dialog/issues/7

Hope it works for you :)

Dong