paper-dialog appears in background

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();

Apparently iOS handles divs differently form other operating systems. So rearranging some things fixed it and made the paper-dialog appear in the foreground.

       <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>
            </div>
          </div>
        </div>
        <div>
          <paper-dialog class="interest-dialog" modal>
            <!-- dialog code here -->
          <paper-dialog>
        </div>