issues with HTML5 fullscreen mode for leaflet maps on IE11 only WordPress
- SOLVED
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.
As I am no IE11 expert I dont really know where to start here - are other CSS classes causing this issue or conflicting javascript? Anyway it is not theme dependent, as this issue also occurs on customers websites like [[LINK href="http://www.timebranding.com/"]]http://www.timebranding.com/[[/LINK]] (map at the bottom).
any help would be appreciated!
thx,
Robert
Answers (1)
Bob answers:
Hi,
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.
Regards
Bob
Bob comments:
Hi
Here is video which explain what I am saying.
http://screencast.com/t/H2O4o2wd
Regards,
Bob
Robert Seyfriedsberger comments:
Hi Bob,
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.
best,
Robert
Bob comments:
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 :(
.leaflet-container:-ms-fullscreen{
position:fixed !important;
width:100% !important;
height:100% !important;
top:0 !important;
left:0 !important;
z-index:99999;
}
or if above not work try to add
.leaflet-fullscreen-on{
position:fixed !important;
width:100% !important;
height:100% !important;
top:0 !important;
left:0 !important;
z-index:99999;
}
And may be these articles become helpful to you.
[[LINK href="http://generatedcontent.org/post/70347573294/is-your-fullscreen-api-code-up-to-date-find-out-how-to"]]http://generatedcontent.org/post/70347573294/is-your-fullscreen-api-code-up-to-date-find-out-how-to[[/LINK]]
[[LINK href="http://msdn.microsoft.com/en-us/library/ie/dn265028(v=vs.85).aspx"]]http://msdn.microsoft.com/en-us/library/ie/dn265028(v=vs.85).aspx[[/LINK]]
Robert Seyfriedsberger comments:
Thx a lot Bob - the second code block fixed all issues :)