IONI C Mapbox не отображается полностью, пока я не установлю полный экран или не открою инструменты разработчика

Question

Я использую API mapbox для создания карты. Я пытаюсь сделать ширину и высоту равными 100%, но класс mapboxgl-canvas имеет значение по умолчанию при запуске, это 300px для witthth и 400px для высоты.

Но когда я даю полноэкранные инструменты или инструменты разработчика, они помещаются в определенные мной стили css, а именно:

#map {

    width: 100%;

    height: 100%;

  }

Это мой tab2.page

<ion-header>

  <ion-toolbar>

    <ion-title>

      Tab 2

    </ion-title>

  </ion-toolbar>

</ion-header>

<ion-content>

  <div id="map"></div>

 </ion-content>

И мой файл TypeScript

import { Component, OnInit } from '@angular/core';

import { environment } from '../../environments/environment.prod';

import * as Mapboxgl from 'mapbox-gl';

@Component({

  selector: 'app-tab2',

  templateUrl: 'tab2.page.html',

  styleUrls: ['tab2.page.scss']

})

export class Tab2Page implements OnInit{

  constructor() {}

  title = 'view';

  map: Mapboxgl.Map;

  ngOnInit(){

    (Mapboxgl as any).accessToken = environment.mapboxKey;

    this.map = new Mapboxgl.Map({

    container: 'map', // container id

    style: 'mapbox://styles/mapbox/outdoors-v11',

    center: [-74.810913,10.985246], // LNG, LAT

    zoom: 14 // starting zoom

    });



    // Add zoom and rotation controls to the map.

    this.map.addControl(new Mapboxgl.NavigationControl());



  }

}