Firefox 64.0: Parts of heatmap are not loading


#1

Hello,

I am using plotly.js for my website to display some heatmaps. Normally, I am using Chrome (version 71.0.3578.98). However, I recently discovered if I am using Firefox (version 64.0 (64-bit)) that some parts of the heatmap are not shown.
If I use an older Firefox version (like 52.9.0 (32-bit)) it still works as I expect.

How it should look like

Chrome (71.0.3578.98) & Firefox (52.9.0 (32-bit)):


Problem

Firefox (64.0):

As you can see the heatmap is not completely loaded.

Moving the mouse over the heatmap:

This results that some parts are loaded. To be more precise the parts over which I moved the cursor (in this example I moved it over the three visible parts).


Code example

Example
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.33.1/plotly.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script>

<div id="test_heatmap"></div>


<script>
	// Create a data set
    var result_plane = {
		"x":[],
        "y":[],
        "z":[]
    };

    var y_axis_max = 0;
    var x_axis_max = 1;
    var y_axis_min = 10;
    var x_axis_min = 100;

    /*
     * Large array!!!
     * If the array is small (for example steps = 3) it still works.
     */
    var steps = 1000; 
    result_plane['x'] = (numeric.linspace(x_axis_min, x_axis_max, steps));  // the x-axis
    result_plane['y'] = (numeric.linspace(y_axis_min, y_axis_max, steps));  // the y-axis

    // The data for the z-axis
    for(i in result_plane['x']){

		var array = new Array();

		for(k in result_plane['y']){

			array[k] = Math.random();

		}

		result_plane['z'].push(array);

    }

    data = [
        {
            x: result_plane['x'],
            y: result_plane['y'],
            z: result_plane['z'],
            type: 'heatmap',
            name: 'Heatmap',
            zmin: 0,
            zmax: 1,
            zhoverformat: ".5e", // Show the z-axis as an exponential value
            colorscale: [                   // To simulate a logarithmic z-axis
				['0.0', '#0000FF'],
				['0.000000001', '#0000FF'],
				['0.00000001', '#55AAAA'],
				['0.0000001', '#AAD455'],
				['0.000001', '#FFFF00'],
				['0.00001', '#FFD400'],
				['0.0001', '#FFAA00'],
				['0.001', '#FF8000'],
				['0.01', '#FF5500'],
				['0.1', '#FF2A00'],
				['1', '#FF0000']
            ],
            showscale: false,
            hoverinfo: "all"
        }
    ];

    layout = {
        title: '<b>Title</b>',
        margin: {
			b: 140
        },
        xaxis: {
            title: 'x-Axis',
            domain: [0, 0.9],
        },
        yaxis: {
            title: 'y-Axis',
        },
    };

	Plotly.newPlot(
		'test_heatmap',
		data,
		layout
	);
	</script>
</html>

I tried to create a minimal example but without removing to many parts of the original plot generation.

Note:

If I use for

result_plane[‘x’]
result_plane[‘y’]
result_plane[‘z’]

small arrays with for example 3 entries it works for all browser versions.

Change of the input to small arrays
result_plane['x'] = [1, 2,3];  // the x-axis
result_plane['y'] = [1, 2,3];  // the y-axis
result_plane['z'] = [[10, 12,13],[0.1, 1.2,3],[0, 2,1]];  // the z-axis

Important

After some testing I discovered that if “steps > 58” only then the problem appears (for steps <= 58 not).


I hope the information is sufficient and reproducible.

If you have any questions on this issue don’t hesitate to ask.

Thanks in advance!

Mrax


#2

I experience exactly the same problem and would be very happy to find a solution. When the mouse is being moved over the missing parts of the heatmap then they become visible. By clicking with the mouse on the heatmap the entire heatmap gets rendered/updated correctly.


#3

That appears related to https://github.com/plotly/plotly.js/issues/3393 - which unfortunately is caused by an FF bug (filed here -> https://bugzilla.mozilla.org/show_bug.cgi?id=1517458)

We’re hoping for a quick fix from the FF team.