0

I have a leaflet map opened and displayed in a Bootstrap3 modal. The map is shown correctly in Chrome and Firefox but when opened in Safari (Version 9.0.3) its zoomed in and only part of it is displayed.

I have tried to change CSS properties based on recommendations here. But there is no effect. Anyone had similar issues with the trio Safari, Bootstrap3 Modals and Leaflet?

EDITED

As @ghybs pointed correctly the use of map.invalidateSize() function had solved the above issue in several other cases. Also I use this function in order to display the leaflet map correctly. And this works fine when in Chrome or Firefox.

My leaflet map lives in a tab inside a modal. I execute the invalidateSize() function when the user changes from the first tab to the second (the one with the map). This is the event I use:

 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
     var tab = $(e.target).attr("href"); 
     if (tab == '#map'){ 
       map.invalidateSize(); ...

enter image description here

Community
  • 1
  • 1
user1919
  • 3,818
  • 17
  • 62
  • 97
  • See if you are in that situation: http://stackoverflow.com/questions/36246815/data-toggle-tab-does-not-download-leaflet-map/36257493#36257493 – ghybs Jun 09 '16 at 09:26
  • Thanks. I actually already use the map.invalidateSize() in order to fix the issue described in the post you sent. But this doesn't work in my Safari. – user1919 Jun 09 '16 at 09:40
  • You might still have a race condition then... How did you make sure the invalidateSize was called after the container final size was set? – ghybs Jun 09 '16 at 09:50
  • So basically the modal includes two tabs. The second tab has the map. I use an event to see which tab is active as: $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { var tab = $(e.target).attr("href"); if (tab == '#map'){ map.invalidateSize(); ... – user1919 Jun 09 '16 at 10:16
  • 2
    Please add your formatted code to your question. Also consider reproducing your issue on an online editing service (like JSFiddle, Plunker, etc.), so that it is much easier or people to see your problem and provide you with support. – ghybs Jun 09 '16 at 10:35
  • Cannot reproduce your issue on Safari 9.1.1: http://jsfiddle.net/0nexhq92/1/ – ghybs Jun 10 '16 at 09:49

0 Answers0