I the developer of www.mapsmarker.com and using the leaflet fullscreen plugin ([[LINK href="https://github.com/Leaflet/Leaflet.fullscreen"]]https://github.com/Leaflet/Leaflet.fullscreen[[/LINK]]) within my plugin. The example code from the git repo works fine on IE11 - see sample page at [[LINK href="http://mapsmarker.com/dev/pro/fullscreen/"]]http://mapsmarker.com/dev/pro/fullscreen/[[/LINK]] (click on the fullscreen button below the zoom controls).
Anyway when using the code within my plugin, the fullscreen mode does not work properly on IE11 - the map is only shown partially in fullscreen: [[LINK href="https://www.mapsmarker.com/dev/pro/2014/11/02/ie11-fullscreen-issue/"]]https://www.mapsmarker.com/dev/pro/2014/11/02/ie11-fullscreen-issue/[[/LINK]] Screenshot from the broken map also attached.
The strange thing is that fullscreen mode works properly in IE8, IE9 and IE10.
any help would be appreciated!
I do not have IE11 installed in my computer however I was checking it with Chrome.
My chrome version no is 38
I think there is some issue with <strong>position</strong> css.
In full screen mode that inline div has position absolute and in my case if I change it to relative it works!
Please give it a try. Maybe it work with IE11 also.
Here is video which explain what I am saying.
Robert Harm comments:
thanks for the screencast - anyway I think I didnt explain the issue well enough: from your screencast I see that you are debugging the "native" fullscreen map which is accessible via https://www.mapsmarker.com/dev/pro/wp-content/plugins/leaflet-maps-marker-pro/leaflet-fullscreen.php?marker=387 - changing the attribute from absolute to relative doesnt solve this as it hides the maps behind the panel (to be short: this seems to a new issue you discovered :-/)
The issue I need help with is the map on https://www.mapsmarker.com/dev/pro/2014/11/02/ie11-fullscreen-issue/ (not the "native fullscreen mode" for that map, accessible via /leaflet-fullscreen.php?marker=...) because the code for fullscreen.php maps are completely independent from the other one.
I am not sure but may be there is issue that IE11 do not overwrite inline 480px height css somehow.
I am just giving different ideas. May be any one works. I am not able to test it from my side :(
or if above not work try to add
And may be these articles become helpful to you.
Robert Harm comments:
Thx a lot Bob - the second code block fixed all issues :)