fix(polyfill): allow appending generated CSS to body

gabrielloeb · rodneyrehm · commit 19d6698bc5e4 · 2017-07-21T08:42:06.000+02:00
diff --git a/Readme.md b/Readme.md
@@ -99,6 +99,9 @@ viewportUnitsBuggyfill.init({refreshDebounceWait: 250});
 //
 viewportUnitsBuggyfill.init({hacks: window.viewportUnitsBuggyfillHacks});
 
+// append the patched stylesheet to body instead of head
+viewportUnitsBuggyfill.init({appendToBody: true});
+
 // update internal declarations cache and recalculate pixel styles
 // this is handy when you add styles after .init() was run
 viewportUnitsBuggyfill.refresh();
diff --git a/index.html b/index.html
@@ -23,7 +23,7 @@
   </style>
 </head>
 <body>
-  
+
   <p><strong>Note:</strong>	 this script will only work with browsers that have buggy implementations of viewport units and will not polyfill viewport units in older browsers (e.g. IE &lt;= 8)</p>
   <script src="viewport-units-buggyfill.js"></script>
   <script src="viewport-units-buggyfill.hacks.js"></script>
@@ -33,7 +33,14 @@
     // milliseconds to delay between updates of viewport-units
     // caused by orientationchange, pageshow, resize events
     refreshDebounceWait: 250,
-    hacks: window.viewportUnitsBuggyfillHacks
+    hacks: window.viewportUnitsBuggyfillHacks,
+		// append to body
+		appendToBody: true
   });</script>
+  <style>
+    .css-in-body {
+      width: 25vw;
+    }
+  </style>
 </body>
 </html>
diff --git a/viewport-units-buggyfill.js b/viewport-units-buggyfill.js
@@ -161,7 +161,7 @@
       initialized = true;
       styleNode = document.createElement('style');
       styleNode.id = 'patched-viewport';
-      document.head.appendChild(styleNode);
+      document[options.appendToBody ? 'body' : 'head'].appendChild(styleNode);
 
       // Issue #6: Cross Origin Stylesheets are not accessible through CSSOM,
       // therefore download and inject them as <style> to circumvent SOP.
