Fix ie11

src/NewWindow.js

@@ -34,7 +34,7 @@ class NewWindow extends React.PureComponent {
    */
   constructor(props) {
     super(props)
-    this.container = document.createElement('div')
+    this.container = null
     this.window = null
     this.windowCheckerInterval = null
     this.released = false
@@ -98,7 +98,7 @@ class NewWindow extends React.PureComponent {
 
     // Open a new window.
     this.window = window.open(url, name, toWindowFeatures(features))
-
+    this.container = this.window.document.createElement('div')
     // When a new window use content from a cross-origin there's no way we can attach event
     // to it. Therefore, we need to detect in a interval when the new window was destroyed
     // or was closed.
@@ -191,6 +191,9 @@ NewWindow.propTypes = {
  */
 
 function copyStyles(source, target) {
+  // Store style tags, avoid reflow in the loop
+  const headFrag = target.createDocumentFragment()
+
   Array.from(source.styleSheets).forEach(styleSheet => {
     // For <style> elements
     let rules
@@ -200,40 +203,87 @@ function copyStyles(source, target) {
       console.error(err)
     }
     if (rules) {
-      const newStyleEl = source.createElement('style')
+      // IE11 is very slow for appendChild, so use plain string here
+      const ruleText = []
 
       // Write the text of each rule into the body of the style element
       Array.from(styleSheet.cssRules).forEach(cssRule => {
-        const { cssText, type } = cssRule
-        let returnText = cssText
-        // Check if the cssRule type is CSSImportRule (3) or CSSFontFaceRule (5) to handle local imports on a about:blank page
-        // '/custom.css' turns to 'http://my-site.com/custom.css'
-        if ([3, 5].includes(type)) {
-          returnText = cssText
-            .split('url(')
-            .map(line => {
-              if (line[1] === '/') {
-                return `${line.slice(0, 1)}${
-                  window.location.origin
-                }${line.slice(1)}`
-              }
-              return line
-            })
-            .join('url(')
+        const { type } = cssRule
+
+        // Skip unknown rules
+        if (type === CSSRule.UNKNOWN_RULE) {
+          return
         }
-        newStyleEl.appendChild(source.createTextNode(returnText))
+
+        let returnText = ''
+
+        if (type === CSSRule.KEYFRAMES_RULE) {
+          // IE11 will throw error when trying to access cssText property, so we
+          // need to assemble them
+          returnText = getKeyFrameText(cssRule)
+        } else if (
+          [CSSRule.IMPORT_RULE, CSSRule.FONT_FACE_RULE].includes(type)
+        ) {
+          // Check if the cssRule type is CSSImportRule (3) or CSSFontFaceRule (5)
+          // to handle local imports on a about:blank page
+          // '/custom.css' turns to 'http://my-site.com/custom.css'
+          returnText = fixUrlForRule(cssRule)
+        } else {
+          returnText = cssRule.cssText
+        }
+        ruleText.push(returnText)
       })
 
-      target.head.appendChild(newStyleEl)
+      const newStyleEl = target.createElement('style')
+      newStyleEl.textContent = ruleText.join('\n')
+      headFrag.appendChild(newStyleEl)
     } else if (styleSheet.href) {
       // for <link> elements loading CSS from a URL
-      const newLinkEl = source.createElement('link')
+      const newLinkEl = target.createElement('link')
 
       newLinkEl.rel = 'stylesheet'
       newLinkEl.href = styleSheet.href
-      target.head.appendChild(newLinkEl)
+      headFrag.appendChild(newLinkEl)
     }
   })
+
+  target.head.appendChild(headFrag)
+}
+
+/**
+ * Make keyframe rules.
+ * @param {CSSRule} cssRule
+ * @return {String}
+ * @private
+ */
+
+function getKeyFrameText(cssRule) {
+  const tokens = ['@keyframes', cssRule.name, '{']
+  Array.from(cssRule.cssRules).forEach(cssRule => {
+    // type === CSSRule.KEYFRAME_RULE should always be true
+    tokens.push(cssRule.keyText, '{', cssRule.style.cssText, '}')
+  })
+  tokens.push('}')
+  return tokens.join(' ')
+}
+
+/**
+ * Handle local import urls.
+ * @param {CSSRule} cssRule
+ * @return {String}
+ * @private
+ */
+
+function fixUrlForRule(cssRule) {
+  return cssRule.cssText
+    .split('url(')
+    .map(line => {
+      if (line[1] === '/') {
+        return `${line.slice(0, 1)}${window.location.origin}${line.slice(1)}`
+      }
+      return line
+    })
+    .join('url(')
 }
 
 /**