On Mobile Safari, "with-backdrop" prevents canceling by clicking outside dialog

[hadfieldn]

On Mobile Safari, the following dialog doesn't close when clicking outside it:

<paper-dialog id="dialog" with-backdrop>
  <h2>Dialog Content</h2>
</paper-dialog>

[hadfieldn]

As a workaround, when the dialog is opened I'm adding a listener to backdropElement to close it:

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
<dom-module id="dialog-test">
  <template>
    <paper-dialog id="dialog" with-backdrop>
      <h2>Dialog Content</h2>
    </paper-dialog>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'dialog-test',

    properties: {
      _boundOnBackdropClick: {
        type: Function,
        value: function() {
          return this._onBackdropClick.bind(this);
        }
      }
    },
    open: function () {
      this.$.dialog.backdropElement.addEventListener('click', this._boundOnBackdropClick);
      this.$.dialog.open();
    },

    _onBackdropClick: function() {
      this.$.dialog.backdropElement.removeEventListener('click', this);
      this.$.dialog.close();
    }
  });
</script>

[spirylics]

+1

[Anthony2539]

+1

[addyosmani]

This issue was moved to PolymerElements/paper-dialog#33