Google Chrome 84 + Google Maps InfoWindow: Prevent webpage jump when clicking close button

Question

There seems to be an odd behavior in Google Chrome v84 when closing an InfoWindow in a Google Map embedded in a webpage using the JavaScript API:

Whenever the page is not scrolled to the top, clicking the close button on an InfoWindow makes the scroll position of the page jump by 15px down.

This did not happen in Version 83 and lower.

• New issue in the tracker: https://issuetracker.google.com/issues/163214518
• JSFiddle demo: http://jsfiddle.net/upsidown/hb1dx5a3/

Here is a simple reproducible example. Scroll the page down until the map is in the viewport, click the marker, close the Infowindow, the page will scroll down by 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

add overflow-anchor:none to parent, here is

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