Openlayers 4 popup window doesn't show if in full-screen mode

Question

Hi I have map on which I can show different layers. By clicking on each feature contained in the layer(s) a popup window appear with information about that feature. Everything works fine, but if I am in FullScreen mode the popup window is hidden (it is called but hidden by the fullscreen mode), although a maximum z-index was given to it.

The map is online at the following link https://www.marinemammalhabitat.org/imma-eatlas/

Anyone can help me in solving the thing? Thanks

The following is the code for the popup window:

/code to show popups containing layer's features
var info = document.getElementById('info');
var target = document.getElementById('map');
function displayFeatureInfo(pixel) {
        info.style.left = '30%';
        info.style.top = '20%';
        info.style.height = 300 + 'px';

        var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
            return feature;
        });
        if (feature) {
            var geometry = feature.getGeometry();
            var coord = geometry.getCoordinates();
    var text = '<table><tbody>';
   //if (feature.get('AOI')) {text += '<tr><td> <h2> ' + feature.get('AOI') + '</h2></td></tr>';} else {text += '';}
    text += '<tr><td style="background-color: rgba(140, 177, 222, 0.5);"> <h2> ' + feature.get('Title') + '</h2></td></tr>';
    text += '<tr><td><strong>Summary: </strong>' + feature.get('Summary') + '</h2></td></tr>';
    text += '<tr><td style="background-color: rgba(140, 177, 222, 0.5);"><strong>Region:</strong> ' + feature.get('Region') + '</td></tr>';
    if (feature.get('AOI')) {text += '';} else {
    text += '<tr><td> <strong>Criteria:</strong> ' + feature.get('Criteria') + '</td></tr>';
    }
    if (feature.get('AOI')) {text += '';} else {  
    text += '<tr><td style="background-color: rgba(140, 177, 222, 0.5);"> <strong>Species:</strong> ' + feature.get('Species') + '</td></tr>';
    }
    if (feature.get('Status')) {text += '<tr><td> <strong>Status:</strong> ' + feature.get('Status') + '</td></tr>';} else {text += '';}
    if (feature.get('URL')) {text += '<tr><td> <a href=" ' + feature.get('URL') + '"> MORE INFO </a></td></tr>';} else {text += '<tr><td> </td></tr>';}
    //text += '<tr><td> <a href = "https://www.marinemammalhabitat.org/portfolio-item/under-maintenance/" target = "_blank"> MORE INFO</a> </td></tr>';
    text += '</tbody></table>';
            info.style.display = 'none';
            info.innerHTML = text;
            info.style.display = 'block';
            target.style.cursor = "pointer";
        } else {
            info.style.display = 'none';
            target.style.cursor = "";
        }
    }

map.on('click', function(evt) {
        if (evt.dragging) {
            info.style.display = 'none';
            return;
        }
        var pixel = map.getEventPixel(evt.originalEvent);
        displayFeatureInfo(pixel);
});
//ends code for popups 

CSS for the #info div is as follows:

#info {
position: absolute;
z-index: 2147483647;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 8px;
color: #000000;
padding: 10px;
font-size: 14px;
font-weight:500;
top: 20%;
left: 30%;
/*pointer-events: none;*/
overflow-y: scroll;
display:none;}

The FullScreen control added to the map is as follows:

var map = new ol.Map({
    target: 'map',
    layers: [],
    controls: [
        //Define the default controls
        new ol.control.Zoom(),
        new ol.control.Attribution(),
        //Define some new controls
        new ol.control.ZoomSlider(),
        new ol.control.MousePosition({
        projection: 'EPSG:4326',
        coordinateFormat: function (coordinate) {
                return 'Coordinates: ' + 'Lat ' + ol.coordinate.format(coordinate, '{y}', 3) + ' Long ' + ol.coordinate.format(coordinate, '{x}', 3);
            },
            target: 'coordinates'
        }), 
        new ol.control.ScaleLine(),
        new ol.control.OverviewMap(),
        new ol.control.FullScreen(),
        new app.Legend()
    ],
    view: view
});

Answer 1

The problem does not exist in Chrome, but in Firefox. It's because they internally handle fullscreen differently.

Browsers apply fullscreen to a element. OpenLayer's Fullscreen Control selects the map viewport's per default. However, Firefox seems to hide elements that are not child elements of that selected element, while Chrome does not. Since the popup is not a child of the #map div, you can't see the popup anymore.

OL lets you choose a target element for the Fullscreen control (see api):

var fullscreenTarget = document.getElementById('info').parentElement;
new ol.control.FullScreen({
  source: fullscreenTarget
});

Instead of ascending to the parent, give the parent element an id.

PS: You can read more about the Fullscreen API on developer.mozilla.org.