Openlayers 4ポップアップウィンドウがフルスクリーンモードで表示されない場合

Question

こんにちは私は別のレイヤーを表示することができるマップを持っています。レイヤーに含まれる各フィーチャーをクリックすると、そのフィーチャーに関する情報がポップアップウィンドウに表示されます。すべて正常に動作しますが、フルスクリーンモードの場合、ポップアップウィンドウは非表示になります（フルスクリーンモードでは隠されていますが、最大zインデックスが与えられています）。マップは、以下のリンクからオンラインである

https://www.marinemammalhabitat.org/imma-eatlas/

誰もが事の解決に私を助けることができますか？おかげ

次は、ポップアップウィンドウのためのコードです：次のようにマップに追加フルスクリーンコントロールがある

#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;} 

：

/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 #info divのため、次のようにされています。

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

この問題はChromeではなくFirefoxで発生しています。内部的には全画面を別々に扱うからです。

ブラウザは、フルスクリーンをの要素に適用します。 OpenLayerのフルスクリーンコントロールは、デフォルトのマップビューポートを選択します。 しかし、Firefoxは選択された要素の子要素ではない要素を隠しているようですが、Chromeではそうではありません。ポップアップは#map divの子ではないので、ポップアップはもう表示されません。

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

が代わりに親に昇順で、親要素にIDを与える：

OLあなたはフルスクリーンコントロール（see api）のターゲット要素を選択することができます。

PS：フルスクリーンAPIの詳細については、developer.mozilla.orgをご覧ください。