Store html content in a data-html attribute.

.travis.yml

@@ -6,6 +6,10 @@ env:
   - MOZ_HEADLESS=1
 
 addons:
+  apt:
+    packages:
+      # Without libgtk (as of 2019-11-6), firefox cannot run properly
+      - libgtk-3-0
   firefox: latest
 
 env:

branca/element.py

@@ -322,30 +322,36 @@ def render(self, **kwargs):
         return self._template.render(this=self, kwargs=kwargs)
 
     def _repr_html_(self, **kwargs):
-        """Displays the Figure in a Jupyter notebook.
-
-        """
-        html = self.render(**kwargs)
-        html = "data:text/html;charset=utf-8;base64," + base64.b64encode(html.encode('utf8')).decode('utf8')  # noqa
+        """Displays the Figure in a Jupyter notebook."""
+        # Base64-encoded HTML is stored in a data-html attribute, which is used to populate
+        # the iframe. This approach does not encounter the 2MB limit in Chrome for storing
+        # the HTML in the src attribute with a data URI. The alternative of using a srcdoc
+        # attribute is not supported in Microsoft Internet Explorer and Edge.
+        html = base64.b64encode(self.render(**kwargs).encode('utf8')).decode('utf8')
+        onload = (
+            'this.contentDocument.open();'
+            'this.contentDocument.write(atob(this.getAttribute(\'data-html\')));'
+            'this.contentDocument.close();'
+        )
 
         if self.height is None:
             iframe = (
             '<div style="width:{width};">'
             '<div style="position:relative;width:100%;height:0;padding-bottom:{ratio};">'  # noqa
-            '<iframe src="{html}" style="position:absolute;width:100%;height:100%;left:0;top:0;'  # noqa
+            '<iframe src="about:blank" style="position:absolute;width:100%;height:100%;left:0;top:0;'  # noqa
             'border:none !important;" '
+            'data-html={html} onload="{onload}" '
             'allowfullscreen webkitallowfullscreen mozallowfullscreen>'
             '</iframe>'
             '</div></div>').format
-            iframe = iframe(html=html,
-                            width=self.width,
-                            ratio=self.ratio)
+            iframe = iframe(html=html, onload=onload, width=self.width, ratio=self.ratio)
         else:
-            iframe = ('<iframe src="{html}" width="{width}" height="{height}"'
+            iframe = ('<iframe src="about:blank" width="{width}" height="{height}"'
                       'style="border:none !important;" '
+                      'data-html={html} onload="{onload}" '
                       '"allowfullscreen" "webkitallowfullscreen" "mozallowfullscreen">'  # noqa
                       '</iframe>').format
-            iframe = iframe(html=html, width=self.width, height=self.height)
+            iframe = iframe(html=html, onload=onload, width=self.width, height=self.height)
         return iframe
 
     def add_subplot(self, x, y, n, margin=0.05):