javascript - Leaftlet on Ionic Tabs App shows only first tile -

i have ionic tabs app (i used cordova templates on visual studio 2015) leaflet map on second tab. on first tab have search parameters pois want show on map markers. working fine, including map showing tiles, until start interacting controls on first tab. specifically, when enter input control , soft keyboard appears, if go second tab, map showing first tile. if zoom in or out, map refreshes shows first tile. problem solved though if change orientation of device.

the soft keyboard not thing causes problem. on ripple example, soft keyboard not show (i use laptop keyboard) after while manipulating search parameters on first tab, map stops working properly.

also, have tried mapbox api instead of leaflet , problem occurs same way.

the l.map instance unable correctly get/calculate it's dimensions because @ initialization instance's parent container has style of display: none. can call invalidatesize on map instance make recalculate it's dimensions when tab containing map shown:

checks if map container size changed , updates map if — call after you've changed map size dynamically, animating pan default.

http://leafletjs.com/reference.html#map-invalidatesize

i'm far no ionic expert according docs/reference, ion-tab has on-select callback this:

called when tab selected.

http://ionicframework.com/docs/api/directive/iontab/

<ion-tab on-select="ontabselected()"></ion-tab>  function ontabselected () {     //assuming 'map' holds reference map instance.     map.invalidatesize(); } 

as mentioned in comments below question poster, above works, listening $ionicview.enter event , using invalidatesize in it's callback:

$scope.$on('$ionicview.enter', function () {     map.invalidatesize(); });