[SOLVED] Google maps JS API shows blue focus border

Google maps JS API shows blue focus border

Google Maps JS API began displaying blue focus border around the map after switching to another browser tab and then go back. Once the map is clicked the border vanishes.
The element with the border is generated by Gmaps and within their DOM. Border seems to show only in full-page map display.

Tracing Gmap DOM show a border at child of gm-style: (div.gm-style > div)

<div style="pointer-events: none; width: 100%; height: 100%;
           box-sizing: border-box; position: absolute; z-index: 1000002;
           opacity: 0; border: 2px solid rgb(26, 115, 232);"></div>

The opacity: 0 is dynamic and change to opacity: 1 after click to another browser tab.
Why Gmaps JS API like this works? Any idea how to clearly remove this square from viewpoint?

Edit:

blue square shows in Chrome 89 && Mozilla 86
Steps: open js fiddle link -> focus the map (easy roll map from side to side) -> change browser tab -> go back to tab with jsfiddle example -> blue square JSFiddle example

Opened issue as bug: Google Issuetracker

Solution

I met the same issue, the CSS works:

.gm-style iframe + div { border:none!important; }