Papier-Dialog erscheint im Hintergrund

Question

Ich baue eine Polymer-App, und auf den meisten Seiten und in den meisten Umgebungen funktioniert die paper-dialog gut. Doch auf iOS die paper-dialog hält im Hintergrund zeigt sich:

Der Dialog Code lautet wie folgt:

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

Und ich jQuery bin mit dem Dialog zu öffnen, wenn der Benutzer klickt auf ein fab:

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

Answer 1

Offenbar behandelt iOS divs anders als andere Betriebssysteme. Einige Dinge neu zu arrangieren, hat es behoben und die paper-dialog im Vordergrund erscheinen lassen.

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