Angular App中的Openlayers Fullscreen在Firefox中有效，但在Chrome中不可用

Question

我在一个现有的大型Angular 5 / Ionic 3.9应用程序中包含了一张地图。 使用Openlayers 5.0.2版

我还需要包括全屏视图。

在Firefox中，全屏视图有效。 在Chrome中，可以切换到全屏，但是没有加载地图，也不存在地图的div。

我试图将全屏的源设置为id / class fullscreen的div

<div id="fullscreen" class="fullscreen">
    <div id="map" class="db-map"></div>
</div>

let fullscreenTarget = document.getElementById('fullscreen').parentElement;

  controls: DefaultControls({
      attribution: false
    }).extend([new FullScreen({
      source: fullscreenTarget
    })]),

我也尝试过这样的一些CSS修改

.db-map{ 
  #map {
      margin: 5;
      font-family: sans-serif;
      height: 100%;
      width: 100%;
      -webkit-full-screen: 100%;
      -moz-full-screen: 100%;
      -ms-fullscreen: 100%;
    }
}
.fullscreen {
  height: 100%;
  width: 100%;
}
.db-map.fullscreen {
  height: 100%;
  width: 100%;
}

在检查html页面chrome时，显示： Chrome fullscreen elements

Firefox显示： Firefox fullscreen elements

但是没有任何效果，我不知道我可以尝试什么。

---

仅对上述问题进行了跟进，该全屏模式在Firefox中有效，但在Chrome中不起作用。 使用新版本的Chrome，该缺陷已修复，现在可以正常工作。