setZoom not working in Chrome but is working in other browsers

I am unable to get setZoom or any of the zoom features to work on my leaflet map in Chrome.

It works fine in Firefox and Edge but I need it to work in Chrome also and cannot find anything on this.

Any help would be appreciated, thanks.

Please see below the code which is working in Firefox and Edge. Is there something in this I need to remove or add for Chrome?

Please also note that the "myLocation" variable is just a lat lng that is pulled from the browser.

@track myLocation;
    connectedCallback() {
        Promise.all([loadStyle(this, LEAFLET + "/leaflet.css"), loadScript(this, LEAFLET + "/leaflet.js")]).then(() => {
            this.container = this.template.querySelector(".map");
            // eslint-disable-next-line no-undef
            this.map = L.map(this.container, { scrollWheelZoom: true, maxZoom: 18, minZoom: 10 }).locate({
                setView: true,
                setZoom: 14
            });
            // this.map.setZoom(14)
            // eslint-disable-next-line no-undef
            L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {}).addTo(this.map);
            navigator.geolocation.getCurrentPosition(this.success.bind(this));
        });
    }

I have also tried using this.map.setZoom(x) and map.setZoom(x).

I figured it out, Chrome has a bigger delay than other browsers for the map to be built. Consequently the zoom is set on the map as it is being built stopping it from working.

I solved this with the use of the .setZoom() and .draw() functions. This will cause markers the zoom to be increased when the map is finished loading and markers are added.

Please see example code below:

draw() {
    console.log(this.myLat, this.myLong);

    if (this.markerArray) {

        this.markerArray.forEach((marker) => {
            this.map.removeLayer(marker);
        });
    }
    this.mapMarkers.forEach((mapMarker) => {
        // eslint-disable-next-line no-undef
        let newMarker = L.circle(
            mapMarker,
            { color: "rgb(34,46,117)", fillColor: "rgb(34,46,117)", fillOpacity: 0.3, radius: 5 }
        );


        newMarker.myData = mapMarker;
        newMarker.addTo(this.map);
        newMarker.on('click', () => {
            this.openfireMapModal(mapMarker);

        });
    });

    this.map.setZoom(18);
    this.map.setView([this.myLat, this.myLong]);
    this.working = false;
}