Leaflet tiles brake on HTML-input

[Zeno Trevisan]

Hello everyone, I encountered a strange error while developing an Ionic3 application and using the strong typed version of Leafletjs.

The map is declared in a page map.ts in the following way:

    this.map = leaflet.map("map").fitWorld();
    this.map.setView(leaflet.latLng(lat, lng), 20);

    //set the tileLayer
    leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
      subdomains: ['a', 'b', 'c']
    }).addTo(this.map);

And everything works fine.

Now if I have any HTML input in ANY page on my application (even not related directly to map.ts), the map tiles stop working showing a gray area instead of the tile.

This happens with any input on any page, with or without binding variables or functions.

Input tried:

    First name: <input type="text" name="fname">

    <ion-input type="text" placeholder="Insert ID" ></ion-input>
    <div contentEditable="true" (click)="$event.stopPropagation()">testtest</div>

 

Navigating from the map, to any page, and inserting a simple char inside the input is enough to break the map.


Anyone had any similar issue?

Sorry I'm not sure this is the right place to post it.