EDIT
In your specific case, this is related to the Roboto web font. It is included in the Google Maps API, but nothing uses it at that time on your page until InfoWindow opens, so the browser has no reason to download it, and no.
However, when you open the info window, the browser at this point understands that it needs a font and starts to download it, but google maps measured the infoWindow size before loading the font (see the original answer on how the Google Maps api measures the infoWindow size) . When the font has finished loading, the content in infoWindow will be redrawn in the Roboto font, which actually makes infoWindow different (larger) than the size that Google measured so that it was before the font was loaded, and you will see scroll bars on it .
This also explains why you see scrollbars for the first time - when Google maps measured the info window before the font was loaded, but you won’t see them because the font is already loaded, any dimensions that will be displayed on the maps Google will now be correct.
So the solution is
a) Change something in the Roboto font on your page (forcing the browser to download this font) before the first OR info window opens
b) Use a different font (one that is used elsewhere on your page and thus loads when the page loads) for your infoWindow content.
I will leave the rest of my answer because it is a common misunderstanding of how infoWindows work, and as you pointed out in your Google search, a lot of people have hung it.
TL; DR:
Never use a parent selector (like # map-canvas) to style the HTML content of your info window.
It's not a mistake. Here's how google map info window styles work:
When you tell the Google Maps API you want to open infoWindow with HTML content, Google dynamically creates a div element, adds it to its body tag, captures the dimensions of the dynamically created div, and then adds the div with these dimensions to the map, which is your information.
This is where the trick comes into play.
Let's say this is your HTML:
<div id="map-canvas"> </div>
and this is your infoWindow content:
<h1>I'm an infoWindow</h1> <p>Hi there!</p>
and here is your CSS:
h1 { font-size: 18px; } #map-canvas h1 { font-size: 24px; }
Google almost always incorrectly draws this info-indicator, because when it dynamically creates a info-inversion of a div and adds it to the body to receive dimensions, the div will have h1 font size 18px. So now Google has measurements and places this div on the map, after which the font size h1 increases to 24px , so now Google uses the wrong measurements, and your information will be completed with scrollbars.
I always found the easiest way to work with infoWindow CSS is to use a div wrapper and always customize it, so you will have the HTML content of infoWindow:
<div class="info-window-content"> <h1>I'm an infoWindow</h1> <p>Hi there!</p> </div>
And then your CSS might look like this:
h1 { font-size: 18px; } p { line-height: 1.6; } .info-window-content h1 { font-size: 24px; } .info-window-content p { line-height: 1.2; }
and you won’t fall into the scroll bar in your info window.