Plotly.js: [BUG] The Heatmap colorscale is black on Mac Mojave Safari browser

[George35mk]

Plotly version 1.45.1

On Windows 10 with these browsers:

• Chrome
• Firefox
• Microsoft Edge

My plot renders very well

But on Mac Mojave & Siera on Safari browser I have a black color scale

I dont get any error in the console, so I can't have a clue what is happening!!!

My code

const data = [

    z: [
        [4, 6, 1, 7, 11, 16, 0]
        [6, 9, 7, 12, 22, 27, 0]
        [7, 14, 8, 15, 28, 38, 0]
        [7, 12, 6, 13, 25, 35, 0]
        [4, 8, 2, 9, 14, 21, 0]
        [3, 4, 4, 5, 10, 13, 0]
        [2, 1, 1, 1, 4, 5, 0]
        [3, 6, 3, 9, 12, 15, 0]
        [3, 6, 3, 8, 12, 17, 0]
        [0, 0, 0, 0, 0, 0, 0]
      ]
      x: ["<b>mon</b>", "<b>tue</b>", "<b>wed</b>", "<b>thu</b>", "<b>fri</b>", "<b>sat</b>", "<b>sun</b>"]
      y: ["10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00"]
      type: 'heatmap',
      xgap: 2, ygap: 2,
      colorscale: 'YlGnBu'
]


const layout = {
  font: {
    family: "arial", 
    size: 12, 
   color: "#8e8e8e"
  },
  paper_bgcolor: "#fff",
  plot_bgcolor: "#fff",
  xaxis: {
    type: "category", 
    range: [-0.5, 6.5],
    autorange: true
  },
  yaxis: {
   type: "category", 
   range: [-0.5, 9.5],
   autorange: true
  }
}

Plotly.newPlot(this.plotContainer.nativeElement, data, layout, {staticPlot: false });

What should I do?
Does anybody have the same issue?

Thanks.

[etpinard]

Could you try to find which version of Safari you're using?

[George35mk]

Hi @etpinard

Safari Version 12.1 (14607.1.40.1.4)

[etpinard]

Thanks @George35mk !

Interestingly https://codepen.io/etpinard/pen/xexrwV renders ok when I open it in Safari 12 on browserstack:

Could you try:

• to open https://codepen.io/etpinard/pen/xexrwV to see if it renders ok on your setup?
• tell us a bit more about how you're using plotly.js? For example, does this.plotContainer.nativeElement come from a js framework?

[George35mk]

Ok Works

Basicaly I am using angular 7

so the this.plotContainer.nativeElement is equal to

this.plotContainer.nativeElement === document.getElementById('myContainer');

[George35mk]

very weird, I can't understand why on my app I get this issue

[etpinard]

Basicaly I am using angular 7

OK good to know! Can you try reproducing the problem in a codepen?

[George35mk]

I am using angular 7, maybe on stackblitz, give me some minutes, I will try now

[George35mk]

Sry I try it to create an example but I can't reproduce the issue.

https://stackblitz.com/edit/angular-eezqzs?file=src%2Fapp%2Fcomponents%2Fplotly%2Fplotly.component.ts

[alexcjohnson]

I'm guessing this is about a <base> element, and we need to incorporate context._baseUrl into Drawing.gradient, like we do in Drawing.setClipUrl

[George35mk]

I am not sure if this issue is related but maybe is https://stackoverflow.com/questions/43140737/svg-fill-urlfoo-disappears-when-svgs-are-loaded-dynamically

[George35mk]

I finally reproduce the error. @etpinard @alexcjohnson

open the Safari browser

in order to see the issue you must load this example https://stackblitz.com/edit/angular-eezqzs?file=src%2Findex.html

• step 1: before doing anything wait for the example to render the plot. now you should see this

• step 2: then select the about page

-stpe 3: then select the home page again.

[George35mk]

on the step 1 the url is https://angular-eezqzs.stackblitz.io
then url is changing to https://angular-eezqzs.stackblitz.io/about
back again to home page the url is https://angular-eezqzs.stackblitz.io/home

something is hapening on the base url

<rect class="cbbg" x="719.5" y="-0.5" 
  width="64.359375" height="627" 
  style="fill: rgb(0, 0, 0); fill-opacity: 0; stroke: rgb(68, 68, 68); stroke-opacity: 1; stroke-width: 0px;">
</rect>
<g class="cbfills" transform="translate(0,10)">
   <rect class="cbfill" x="730" width="30" y="0" height="606"
      style="stroke: none; fill: url(#gc743e2-cb397e5c);">
    </rect>
</g>

If I do this, the colorscale will work as expected.

<rect class="cbfill" x="730" width="30" y="0" height="606" 
  style="stroke: none; fill: url('https://angular-eezqzs.stackblitz.io/home#g27bcfc-cb8d00e4');">
</rect>`

[etpinard]

https://github.com/plotly/plotly.js/compare/handle-base-href-in-gradient-url proposes a fix for this issue. It is bundled in https://32947-45646037-gh.circle-artifacts.com/0/dist/plotly.min.js

@George35mk Would you mind testing: https://stackblitz.com/edit/angular-wg7dch?file=src/index.html on your Safari to confirm that the fix works as expected? Thank you!

[George35mk]

Ok, give me 2 min

[George35mk]

@etpinard works 👍👍👍