title: Leaflet Map elements sit in DOM but don't render?
body: <p>Leaflet is <em>rendering</em> because I can see all of its elements in the DOM, but nothing else comes to life. All I see is gray.</p>
  
  <p>The only way I can get map tiles to appear is if I delete the position:absolute on the map container, but that creates a bunch of jumbled map tiles. I checked the GIT history to see if  I accidentally changed a style, but no luck.</p>
  
  <p>Here's the code initializing the map:</p>
  
  <pre><code>// init everything on page show
  $("#map").live('pageshow',function() {
      if(window.localStorage.getItem("lat")!=undefined) { var lat = window.localStorage.getItem("lat")} else { var lat = '49.264'; }
      if(window.localStorage.getItem("lng")!=undefined) { var lng = window.localStorage.getItem("lng")} else { var lng = '-123.123'; }
      try {         
          var map = window.map
          map = new L.Map('map-container');
          var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/006282296d334e66a593e55aca6b5ce0/54803/256/{z}/{x}/{y}.png';
          var cloudmadeAttribution = 'Map Data &amp;copy; 2011 OpenStreetMap';
          var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
          map.setView(new L.LatLng(lat, lng), 12).addLayer(cloudmade);
          map.invalidateSize();
      } catch(e) {console.log(e)}
      userMarkers[1] = new L.Marker( new L.LatLng( lat,lng ) , {icon: new iconUser, clickable: true} );
      map.addLayer( userMarkers[1] );
  });
  </code></pre>
  
  <p>The environment includes jQuery mobile. Unfortunately, the console does not log any errors and the localStorage above indeed holds valid LatLng values when I inspect it.</p>
  
  <p>A screenshot:
  <img src="https://i.stack.imgur.com/3jywu.jpg" alt="screenshot"></p>
  
  <p>Any guesses?</p>