Ask your WordPress questions! Pay money and get answers fast! (more info)

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)

2014-11-02

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 Harm 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 Harm comments:

Thx a lot Bob - the second code block fixed all issues :)