polymer-overlay: fix for polyfill

polymer-overlay/polymer-overlay.css

@@ -130,6 +130,44 @@ We address this by using script based positioning =(
   }
 }
 
+.polymer-overlay {
+  position: fixed;
+  z-index: 10;
+  outline: none;
+  display: none;
+  opacity: 0.99;
+  -webkit-transition: opacity 0.001s;
+  transition: opacity 0.001s;
+}
+
+/*
+  The revealed class exists because it's necessary to 'show' a node
+  before applying a transition. When an overlay is opened, it is 
+  immediately revealed (display: block) and then asynchronously the 
+  opened or closing classes are added.
+
+  Because we don't want to actually show the node before a transition
+  or animation is applied, when the node is 
+  revealed, it is made display: block but visibility: hidden.
+  It is then made visibility: visible when it is opened.
+*/
+
+.revealed {
+  display: block;
+  visibility: hidden;
+}
+
+.revealed.opened {
+  opacity: 1;
+  display: block;
+  visibility: visible;
+}
+
+.revealed.closing {
+  display: block;
+  visibility: visible;
+}
+
 .backdrop {
 	position: fixed;
 	left: 0;

polymer-overlay/polymer-overlay.html

@@ -256,10 +256,10 @@
 				continueRenderOpened: function() {
 					this.target.classList.toggle('opened', this.opened);
 					this.target.classList.toggle('closing', !this.opened);
-					//this.animating = this.asyncMethod('completeOpening', null, this.timeout);
+					this.animating = this.asyncMethod('completeOpening', null, this.timeout);
 				},
 				completeOpening: function() {
-					//clearTimeout(this.animating);
+					clearTimeout(this.animating);
 					this.animating = null;
 					this.target.classList.remove('closing');
 					this.target.classList.toggle('revealed', this.opened);