Legend not working when full screen

[hyper750]

Describe the bug I have a legend inside the map, is working fine when the map is not full screen, but when the map is full screen the legend is not showing.

To Reproduce Steps to reproduce the behavior:

1. Open the map and see the legend is present and working fine
2. Click full screen icon
3. The legend is not present
4. Click full screen icon again to remove the full screen, now the legend is present and working fine

Expected behavior The legend should work fine when full screen.

Screenshots Normal screen, working fine:

Full screen, not showing the legend:

Additional context Code:

<template>
  <!-- MapBox map -->
  <MglMap
    ref="customMap"
    :mapStyle="map.mapStyle"
    :zoom="map.zoom"
    :center="map.center"
    :attributionControl="false"
    @mousemove="mouseMoved"
    @click="mapClick"
  >
    <MglFullscreenControl position="top-left" />
    <MglNavigationControl position="top-left" />
    <MglScaleControl position="bottom-left" />

    <!-- Custom html legend, using the feature selected-->
    <MapLegend :feature="selectedFeature" />

    <div
      v-for="geoJsonLayer in getGeoJsonLayers.mapLayers"
      :key="geoJsonLayer.id"
    >
      <!-- Fill geojson -->
      <MglGeojsonLayer
        :sourceId="geoJsonLayer.sourceId"
        :source="geoJsonLayer.source"
        :layerId="geoJsonLayer.layerId"
        :layer="geoJsonLayer.layer"
      />

      <!-- Source is not needed but the source id is needed :) when you are using an already defined source above -->
      <!-- Outline geojson -->
      <MglGeojsonLayer
        :sourceId="`${geoJsonLayer.outlineLayerId}-source`"
        :layerId="geoJsonLayer.outlineLayerId"
        :layer="geoJsonLayer.outlineLayer"
      />
    </div>
  </MglMap>
</template>

Node packages installed: ├── @highcharts/map-collection@1.1.3 ├── @vue/cli-plugin-babel@4.2.3 ├── @vue/cli-plugin-eslint@4.2.3 ├── @vue/cli-service@4.2.3 ├── axios@0.19.2 ├── babel-eslint@10.1.0 ├── bootstrap-vue@2.21.2 ├── bootstrap@4.6.0 ├── core-js@3.9.1 ├── d3-drag@2.0.0 ├── d3-force@2.1.1 ├── d3@6.6.1 ├── eslint-plugin-vue@6.2.2 ├── eslint@6.8.0 ├── highcharts-vue@1.3.5 ├── highcharts@8.2.2 ├── leaflet.heat@0.2.0 ├── leaflet@1.7.1 ├── mapbox-gl@0.53.1 ├── moment-timezone@0.5.33 ├── proj4@2.7.2 ├── qs@6.10.1 ├── vue-axios@2.1.5 ├── vue-i18n@8.24.2 ├── vue-mapbox@0.4.1 ├── vue-router@3.5.1 ├── vue-template-compiler@2.6.12 ├── vue@2.6.12 └── vuex@3.6.2

[hyper750]

Code example available on codesandbox https://codesandbox.io/s/ecstatic-wave-c3qmg. You should open the link https://c3qmg.csb.app/ on another page to be able to see the fullscreen icon.

[hyper750]

Solved at https://stackoverflow.com/a/67275379/6066690