Added IE11 native fullscreen support

CasiOo commented 10 years ago

There seems to be a problem with the popup content (for a marker) in IE11 when going fullscreen and leaflet inside an iframe. The popup is not positioned directly above the marker, and the popup width is not set correctly.

For a test case, the basic example from http://leafletjs.com/ can be used together with an IFrame

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div style="height: 630px; width: 710px;">
            <iframe src="index.html" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" onmousewheel="false" frameborder="0" allowtransparency="true" style="height: 100%; width: 100%;"></iframe>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
        <link rel="stylesheet" href="leaflet.fullscreen/leaflet.fullscreen.css" />
        <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
        <script src="leaflet.fullscreen/Leaflet.fullscreen.min.js"></script>
        <style>
            html, body {
                height: 100%;
            }

            #map {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="map" style="">

        </div>
        <script>
            // create a map in the "map" div, set the view to a given place and zoom
            var map = L.map('map', {
                fullscreenControl: true
            }).setView([51.505, -0.09], 13);

            // add an OpenStreetMap tile layer
            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);

            // add a marker in the given location, attach some popup content to it and open the popup
            var marker = new L.Marker([51.5, -0.09]);
            marker.addTo(map)
                .bindPopup('A pretty CSS3 popup. <br> Easily customizable.');
        </script>
    </body>
</html>

CasiOo commented 10 years ago

Thanks, I've modified the code to follow your suggestions :)

jfirebaugh commented 10 years ago

Thanks, committed in a2e67a0053e97c8a6f897f741dccee06881453e7.

I can reproduce the popup issue, but I don't think it's a bug in Leaflet.fullscreen. More likely it's either a bug in IE or in Leaflet itself.

Leaflet / Leaflet.fullscreen

Added IE11 native fullscreen support #27