I am building a Polymer app, and on most pages and in most environments the paper-dialog works fine. However, on iOS the paper-dialog keeps showing up in the background:
The dialog code is as follows:
<div class="fit layout vertical center-center">
<div class="fit layout horizontal large">
<div class="mdl-layout mdl-js-layout">
<main class="mdl-layout__content" on-scroll="_onTrack">
<!-- code here is irrelevent -->
</main>
<paper-dialog class="interest-dialog" modal>
<div class="interest-form">
<center><h2>Interested in this job?</h2></center>
<paper-radio-group selected="Yes" id="interest-response">
<paper-radio-button class="interest-radio-button" name="Yes" value="yes">Yes, I'm interested</paper-radio-button><br />
<paper-radio-button class="interest-radio-button" name="Maybe" value="maybe">Maybe</paper-radio-button><br />
<paper-radio-button class="interest-radio-button" name="No" value="no">No, not for me</paper-radio-button>
</paper-radio-group>
<paper-input
type="email"
class="email-paper-input"
label="email address"
autofocus
error-message="Please input a valid email"
required>
</paper-input>
</div>
<div class="buttons">
<paper-button
class="submit-interest-button"
on-click="_submitInterest">
Submit
</paper-button>
<paper-button
class="dismiss-interest-button"
dialog-dismiss
on-click="_closeInterestDialog">
Cancel
</paper-button>
</div>
</paper-dialog>
</div>
</div>
</div>
And I am using jQuery to open the dialog when the user clicks on a fab:
$('.interest-dialog')[0].open();