Make body[unresolved] function correctly on IE when body contains non-statically positioned

Author: sorvell

src/unresolved.js

@@ -9,20 +9,22 @@
 
 (function(scope) {
 
-  // TODO(sorvell): It's desireable to provide a default stylesheet 
+  // It's desireable to provide a default stylesheet 
   // that's convenient for styling unresolved elements, but
   // it's cumbersome to have to include this manually in every page.
   // It would make sense to put inside some HTMLImport but 
   // the HTMLImports polyfill does not allow loading of stylesheets 
   // that block rendering. Therefore this injection is tolerated here.
-
+  //
+  // NOTE: position: relative fixes IE's failure to inherit opacity 
+  // when a child is not statically positioned.
   var style = document.createElement('style');
   style.textContent = ''
       + 'body {'
       + 'transition: opacity ease-in 0.2s;' 
       + ' } \n'
       + 'body[unresolved] {'
-      + 'opacity: 0; display: block; overflow: hidden;' 
+      + 'opacity: 0; display: block; overflow: hidden; position: relative;' 
       + ' } \n'
       ;
   var head = document.querySelector('head');