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