improve rendering under polyfill.

core-overlay.html

@@ -211,9 +211,7 @@
           'resizeHandler');
       if (this.opened) {
         // TODO(sorvell): force SD Polyfill to render
-        if (window.ShadowDOMPolyfill) {
-          this.target.offsetHeight;
-        }
+        forcePolyfillRender(this.target);
         if (!this._shouldPosition) {
           this.target.style.position = 'static';
           var computed = getComputedStyle(this.target);
@@ -235,6 +233,8 @@
     renderOpened: function() {
       var t = this.getTransition();
       if (t) {
+        // TODO(sorvell): force SD Polyfill to render
+        forcePolyfillRender(this.target);
         t.go(this.target, {opened: this.opened});
       } else {
         this.target.style.display = this.targetStyle.display;
@@ -408,6 +408,12 @@
     },
   });
 
+  function forcePolyfillRender(target) {
+    if (window.ShadowDOMPolyfill) {
+      target.offsetHeight;
+    }
+  }
+
   // TODO(sorvell): This should be an element with private state so it can
   // be independent of overlay.
   // track overlays for z-index and focus managemant

demo.html

@@ -25,11 +25,8 @@
 			}
 
 			#confirmation {
-				left: 50%;
 				text-align: center;
 				width: 150px;
-				margin-left: -75px;
-				transition: all .3s ease-in-out;
 			}
 		</style>
 	</head>