javascript - Polymer paper-dialog not centered -

in polymer app, when open paper-dialog using iphone, it's not centered, opposed opening using chrome or safari using desktop mac or pc.

i'm dynamically constructing paper-dialog element , placing in dom template using javascript, , calling open():

var d = document.createelement('paper-dialog'); d.innerhtml = "<h2>dialog title</h2>"          "<p>some content</p>"+          '<div class="buttons">'+          "<paper-button >more info...</paper-button>"+          "<paper-button dialog-dismiss>decline</paper-button>"+          "<paper-button dialog-confirm autofocus>accept</paper-button>"+          "</div>"; var b = polymer.dom(this.root).appendchild(d); b.open(); 

i'm not using special styles or media queries. reason i'm adding dialog programatically because have tons of different dialog messages , different contents show @ different times, , each of them should call callback @ different screen, depends on added dialog. in other words, need have dialogs added in angular-material's $mddialog, know it's not trivial polymer, maybe not intended use, case that's need, unless there's better way.

see screenshot of problem below

iphone:

chrome:

the issue called b.open(); right after var b = polymer.dom(this.root).appendchild(d);.

since add element dynamically, should have put b.open(); under this.async() call, mentioned in polymer's documentation similar cases.

also fixed code in dialog-manager