Map tiles not showing up properly on mobile web app

[Dzenan Causevic]

I am using leaflet with my jQuery Mobile app for mobile browsers, I am pretty new to this, and I have problem with tiles not showing up properly...

This happens mostly when I use setView() method to move to different coordinates which does not have tiles previously cached and zoom on it. If I move a little bit so the same tiles are used it shows them okay, but as soon as I move further away it needs to load new tiles which are not in the cache, and I can see them in DOM, seems like they do get loaded but they are not showing up on the map... I have to do page refresh for them to show up, or I have to drag with my finger on the map back and forth a little bit for them to show up...

I can see them in the DOM, they seem to be loaded but they are not showing up until I drag map manually back and forth... Also I noticed this is not happening when I open my mobile app on desktop browser, its only on mobile device that this is happening, probabily because it is hardware faster and more powerfull then mobile device

Please, does anybody have any clue why this is happening and what I need to do to somehow force map tiles to show up?

Regards,
Dzenan

[Bryan McBride]

Try calling map.invalidateSize() after setView(). This will force a map update: http://leafletjs.com/reference.html#map-invalidatesize. jQuery Mobile tends to do some funky DOM stuff and this usually solves it.

BRYAN

[Dzenan Causevic]

I did try that as well but I dont see much difference... Maybe I am not passing correct options, in documentation it says:

invalidateSize( <Boolean> options?, <zoom/pan options> options? )

How do I use options when calling invalidateSize()? I dont see any code samples how to use options

Regards,
Dzenan