javascript - Polymer paper-dialog not centered

Question

In my polymer app, when I open a paper-dialog using an iPhone, it's not centered, as opposed to opening it using Chrome or Safari using the a desktop Mac or PC.

I'm dynamically constructing the paper-dialog element and placing it in the DOM template using javascript, and then 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 any special styles or media queries. The reason I'm adding the dialog programatically is because I have tons of different dialog messages and different contents to show at different times, and each of them should call a callback at a different screen, depends on who added the dialog. in other words, I need to have my dialogs added like in angular-material's $mdDialog, I know it's not that trivial for polymer, maybe not the intended use, but for my case that's what I need, unless there's a better way.

See screenshot of the problem below

iPhone:

Chrome:

Answer 1

The issue was that I called b.open(); right after var b = Polymer.dom(this.root).appendChild(d);.

Since I add the element dynamically, I should have put b.open(); under a this.async() call, as mentioned in polymer's documentation for similar cases.

Also fixed the code in my dialog-manager