Google Chrome 84 + Google Maps InfoWindow：点击关闭按钮时防止网页跳转

Question

在使用 JavaScript API 嵌入网页中的 Google Map 中关闭 InfoWindow 时，Google Chrome v84 中似乎有一个奇怪的行为：

每当页面没有滚动到顶部时，单击 InfoWindow 上的关闭按钮会使页面的滚动 position 向下跳15px 。

这在版本 83 及更低版本中没有发生。

• 跟踪器中的新问题： https://issuetracker.google.com/issues/163214518
• JSFiddle 演示： http://jsfiddle.net/upsidown/hb1dx5a3/

这是一个简单的可重现示例。 向下滚动页面直到 map 在视口中，单击标记，关闭信息窗口，页面将向下滚动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

将溢出锚：无添加到父级，这里是

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