Papier-Dialog in Polymer schließt nicht in iPhone

Question

Ich benutze dieses Beispiel aus dem Dokument von Polymer

<paper-dialog> 
    <h2>Header</h2> 
    <paper-dialog-scrollable> 
     Lorem ipsum... 
    </paper-dialog-scrollable> 
    <div class="buttons"> 
    <paper-button dialog-dismiss>Cancel</paper-button> 
    <paper-button dialog-confirm>Accept</paper-button> 
    </div> 
</paper-dialog> 

In jedem Browser, um das Dialogfeld wird geschlossen, wenn ich auf Platz klicken, die nicht der Dialog ist, aber auf dem iPhone IOS 8.4 es funktioniert nicht. Ich kann den Dialog nicht schließen.

Wie kann ich dieses Problem lösen?

Answer 1

Ich weiß, dass es ein Z-Index Problem mit Safari auf IOS gibt. Wahrscheinlich ist der Papier-Dialog nicht ganz so, wie er sein sollte. Sie benötigen möglicherweise ein -webkit-Präfix für die Klasse, wenn es IOS verwendet.

Answer 2

Nach einigen Recherchen fand ich das Thema auf dem Polymer Github, und es gibt einen Weg, es zu hacken, so funktioniert es:

_finishRenderOpened: function() { 
    // focus the child node with [autofocus] 
    if (!this.noAutoFocus) { 
    this._focusNode.focus(); 
    } 

    if(this.withBackdrop) { 
    this.parentNode.insertBefore(this._backdrop, this); 
    } 

    this.fire('iron-overlay-opened'); 

    this._squelchNextResize = true; 
    this.async(this.notifyResize); 
}, 

(Code von https://github.com/dhpollack)

„dhpollack Hack zu implementieren auf eine nette Art, fügen Sie diese Funktion, um Ihre benutzerdefinierten Element:

patchOverlay: function (e) { 
    if (e.target.withBackdrop) { 
     e.target.parentNode.insertBefore(e.target._backdrop, e.target); 
    } 
}, 

Und fügen on-iron-overlay-opened="patchOverlay" auf alle Ihre <paper-dialog> ‚s“

(Implementierung von https://github.com/rubenstolk)

Github Ausgabe: https://github.com/PolymerElements/paper-dialog/issues/7

Hoffe, dass es für Sie arbeitet :)