html - 当覆盖的 div 一直向下滚动（但仅在 Chrome 中）时，出现在全屏元素下的神秘间隙

Question

我有一个应始终占据页面 100% 的全屏传单地图

当我的引导 jumbotron（绝对定位的 div）一直向下滚动时，地图下方会出现一个间隙，只有当 jumbotron 一直向上滚动时才会消失。

它似乎只发生在 Chrome / Brave 中，而不是 Mozilla 或 Safari。

我该如何解决这个问题以及发生了什么？

这个是正常的

这就是差距

html, body, #map (#map is the map)
{
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  border: 0px;
}
/* === Jumbotron Displaying Music (when scrolled, problem occurs === */

#active-music-jumbo
{
  top:10px;
  right:10px;
  min-width:480px;
}
#active-music-jumbo *
{
  position:relative;
  z-index:1002;
}
#active-music-jumbo
{
  color: #ffffff;
  text-shadow:1px 1px 3px rgba(0,0,0,.8);
  z-index:1000;
  position:absolute;
  float: both;
  clear:none;
  overflow-y:scroll;
  scroll-behavior: smooth;
  background-color: rgba(0,0,0,0.2);
  max-height: calc(100% - 20px);
  display:none;
  max-width: 480px;
}

要复制，您可以在此处访问实时站点

标签： htmlcssbootstrap-4leafletbootstrap-modal