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:
(code by https://github.com/dhpollack)
"To implement dhpollack's hack in a nice way, add this function to your custom element:
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 :)