RBokeh not working on Firefox on macOS from conda.

[mingwandroid]

This issue began over at ContinuumIO/anaconda-issues#1391, but has now morphed into something that seems to be rbokeh specific. Conda defaults has the latest packages for nearly all of this stack at present. A simple example of RBokeh works fine in Chrome and also Safari but not in Firefox.

To create the environment:

pushd /tmp
curl -SLO https://repo.continuum.io/miniconda/Miniconda3-latest-MacOSX-x86_64.sh
bash ./Miniconda3-latest-MacOSX-x86_64.sh -b -p /tmp/jupyter
source /tmp/jupyter/bin/activate
conda create -n dspyr r-essentials=1.5.2 -y
source activate dspyr
jupyter notebook

Test-case:

options(jupyter.log_level=10)
library(dplyr)
library(rbokeh)
z <- lm(dist ~ speed, data = cars)
p <- figure(width = 600, height = 600) %>%
  ly_points(cars, hover = cars) %>%
  ly_lines(lowess(cars), legend = "lowess") %>%
  ly_abline(z, type = 2, legend = "lm")
p

Warning from Chrome:

Uncaught TypeError: Cannot read property 'clientHeight' of null
    at e.get_width_height (data:application/x-javascript;base64,d2luZG93LkJva2VoPUJva2VoPWZ1bmN0aW9uKCl7dmFyIHQ9dm9pZCAwO3JldH…:12)
    at e.render (data:application/x-javascript;base64,d2luZG93LkJva2VoPUJva2VoPWZ1bmN0aW9uKCl7dmFyIHQ9dm9pZCAwO3JldH…:12)
    at e.<anonymous> (data:application/x-javascript;base64,d2luZG93LkJva2VoPUJva2VoPWZ1bmN0aW9uKCl7dmFyIHQ9dm9pZCAwO3JldH…:11)
    at y (data:application/x-javascript;base64,d2luZG93LkJva2VoPUJva2VoPWZ1bmN0aW9uKCl7dmFyIHQ9dm9pZCAwO3JldH…:22)
    at g (data:application/x-javascript;base64,d2luZG93LkJva2VoPUJva2VoPWZ1bmN0aW9uKCl7dmFyIHQ9dm9pZCAwO3JldH…:22)
    at p (data:application/x-javascript;base64,d2luZG93LkJva2VoPUJva2VoPWZ1bmN0aW9uKCl7dmFyIHQ9dm9pZCAwO3JldH…:22)
    at t.h.trigger (data:application/x-javascript;base64,d2luZG93LkJva2VoPUJva2VoPWZ1bmN0aW9uKCl7dmFyIHQ9dm9pZCAwO3JldH…:22)
    at t._resize (data:application/x-javascript;base64,d2luZG93LkJva2VoPUJva2VoPWZ1bmN0aW9uKCl7dmFyIHQ9dm9pZCAwO3JldH…:3)
    at t.resize (data:application/x-javascript;base64,d2luZG93LkJva2VoPUJva2VoPWZ1bmN0aW9uKCl7dmFyIHQ9dm9pZCAwO3JldH…:3)
    at o (data:application/x-javascript;base64,d2luZG93LkJva2VoPUJva2VoPWZ1bmN0aW9uKCl7dmFyIHQ9dm9pZCAwO3JldH…:54)

Error from Firefox:

TypeError: body is null[Learn More]  main.min.js:20309:17
	OutputArea.prototype.create_output_subarea/< http://localhost:8888/static/notebook/js/main.min.js:20309:17
	x.event.dispatch http://localhost:8888/static/notebook/js/main.min.js:88:9954
	x.event.add/y.handle

In main.min.js I see:

    OutputArea.prototype.create_output_subarea = function(md, classes, mime) {
        var subarea = $('<div/>').addClass('output_subarea').addClass(classes);
        if (_get_metadata_key(md, 'isolated', mime)) {
            // Create an iframe to isolate the subarea from the rest of the
            // document
            var iframe = $('<iframe/>').addClass('box-flex1');
            iframe.css({'height':1, 'width':'100%', 'display':'block'});
            iframe.attr('frameborder', 0);
            iframe.attr('scrolling', 'auto');

            // Once the iframe is loaded, the subarea is dynamically inserted
            iframe.on('load', function() {
                // Workaround needed by Firefox, to properly render svg inside
                // iframes, see http://stackoverflow.com/questions/10177190/
                // svg-dynamically-added-to-iframe-does-not-render-correctly
                this.contentDocument.open();

                // Insert the subarea into the iframe
                // We must directly write the html. When using Jquery's append
                // method, javascript is evaluated in the parent document and
                // not in the iframe document.  At this point, subarea doesn't
                // contain any user content.
                this.contentDocument.write(subarea.html());

                this.contentDocument.close();

                var body = this.contentDocument.body;
                // Adjust the iframe height automatically
                iframe.height(body.scrollHeight + 'px');
            });

            // Elements should be appended to the inner subarea and not to the
            // iframe
            iframe.append = function(that) {
                subarea.append(that);
            };

            return iframe;
        } else {
            return subarea;
        }
    };

Here:

                var body = this.contentDocument.body;
                // Adjust the iframe height automatically
                iframe.height(body.scrollHeight + 'px');

body (and this.contentDocument.body) is null.

A screen-grab of the Firefox debugger:

.. hopefully this is useful?

[hafen]

I believe the FF thing is an issue that might effect all htmlwidgets in notebooks, not just rbokeh. For example, I tried another htmlwidget, d3heatmap:

library(d3heatmap)
d3heatmap(mtcars, scale = "column", colors = "Spectral", width = 500, height = 500)

And it doesn't work in a notebook in FF but it works in Chrome and Safari. Can you try this example and see if there are commonalities in the errors?

/cc @ramnathv

[ramnathv]

@hafen are you talking about jupyter notebooks? can you provide a reproducible example.

[mingwandroid]

I tried this:

devtools::install_github('jjallaire/sigma')
library(sigma)
sigma(system.file("examples/ediaspora.gexf.xml", package = "sigma"))

and got the same thing, no joy from Firefox (exact same exception), worked fine in Chrome and Safari.

[mingwandroid]

Is there any progress on this? I'd love to be able to recommend Firefox here but cannot.

[flying-sheep]

hi, i didn’t find a solution for this yet, but if you get some recursion error killing your IRkernel, please upgrade IRkernel 0.8.7→0.8.8