纸张对话框出现在背景中

Question

我正在构建一个 Polymer 应用程序，在大多数页面和大多数环境中，paper-dialog 工作正常。但是，在 iOS 上，paper-dialog 不断出现在后台：

对话框代码如下：

        <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>

我正在使用 jQuery 在用户单击 fab 时打开对话框：

$('.interest-dialog')[0].open();

Answer 1

显然 iOS 处理 div 的方式与其他操作系统不同。所以重新安排一些东西修复它并使 paper-dialog 出现在前景中。

       <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>

纸张对话框出现在背景中

paper-dialog appears in background

iphone

jquery

ios

polymer-1.0

paper-dialog