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?
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.
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 :)