javascript - 谷歌浏览器 84 + 谷歌地图信息窗口 : Prevent webpage jump when clicking close button

Question

在使用 JavaScript API 关闭嵌入在网页中的 Google Map 中的 InfoWindow 时，Google Chrome v84 中似乎有一个奇怪的行为:
每当页面没有滚动到顶部时，单击 InfoWindow 上的关闭按钮会使页面的滚动位置跳转 15px下。
这在版本 83 及更低版本中没有发生。

跟踪器中的新问题:https://issuetracker.google.com/issues/163214518

JSFiddle 演示:http://jsfiddle.net/upsidown/hb1dx5a3/

这是一个简单的可重现示例。向下滚动页面直到 map 在视口(viewport)中，单击标记，关闭信息窗口，页面将向下滚动15px .

function initialize() {

  const mapOptions = {
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(0, 0)
  };

  const map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  const marker = new google.maps.Marker({
    position: new google.maps.LatLng(0, 0),
    map: map,
    title: 'Nothing here'
  });

  const infowindow = new google.maps.InfoWindow({
    content: 'Hello World'
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });

  google.maps.event.addListener(infowindow, 'closeclick', function() {
    displayVerticalOffset();
  });

  window.onscroll = function() {
    displayVerticalOffset();
  };
}

function displayVerticalOffset() {
  document.getElementById('pageYOffset').innerHTML = 'Vertical offset: ' + window.pageYOffset + 'px'
}

#map-canvas {
  margin-top: 800px;
  height: 180px;
  width: 180px;
}

#pageYOffset {
  margin-bottom: 800px;
}

<div id="map-canvas"></div>
<div id="pageYOffset"></div>

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize" async defer></script>

Answer 1

将溢出 anchor :无添加到父级，这里是

#map-canvas {
  overflow-anchor:none;
}