[bug] Countries in map flash black on load

[tipsy]

Steps to reproduce

• Open https://stephanwagner.me/create-world-map-charts-with-svgmap#svgMapDemoGDP
• Look at the map while the page loads

Current workaround

<div id="svgMap" class="unloaded"></div>

.unloaded .svgMap-map-wrapper .svgMap-country {
    fill: var(--desired-starting-color);
}

const map = new svgMap(...);
document.querySelector(".unloaded").classList.remove("unloaded");

[m1rm]

@StephanWagner I dug a little into this issue and the simplest fix I came up with is (based on the workaround) to add a $colorMin css-variable in variables.scss and then use it in map.scss to set the initial fill color for .svgMap-map-wrapper and .svgMap-country. The initial color then is the same as the transition initial color and thus there is no visible flash of black anymore.

variables.scss $colorMin: #ffaa11 !default; // just sth. bright to try out

map.scss

.svgMap-map-wrapper {
  fill: $colorMin;
  [...]
}
[...]
  .svgMap-country {
    fill: $colorMin;
    [...]
}
[...]

But this would be a breaking change because $colorMin then is sth. you need to set when initializing the map, just like the $colorOcean (for example) and users who do not set it this way would fallback to the default.

I also thought about a refactoring so that the map is not first initialized and then the colors are applied (which I think is leading to the flashing black).

I'd be glad to open a MR for any solution you'd prefer :slightly_smiling_face: