Firefox 64.0: Parts of heatmap are not loading


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)):


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

<script src=""></script>
<script src=""></script>

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

	// Create a data set
    var result_plane = {

    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();




    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',


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


If I use for


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


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!


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.

That appears related to - which unfortunately is caused by an FF bug (filed here ->

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