I have implement a web page that include a google map component. In the map all other map controls(zoom, satellite, and etc.) are properly visible except the full screen control. The issue recreates only on google chrome. If I load the same page with Microsoft Edge, all the controls (including full screen control) are visible.
I looked into html code using inspect element developer tool. When I inspect on google chrome and edge the results were different. Please see following html code.
HTML on google chrome
<button draggable="false" title="Toggle fullscreen view" aria-label="Toggle fullscreen view" type="button" style="background: none rgb(255, 255, 255); display: none; border: 0px; margin: 10px; padding: 0px; position: absolute; cursor: pointer; user-select: none; top: 30px; right: 0px;">
</button>
HTML on Microsoft Edge
<button title="Toggle fullscreen view" class="gm-control-active gm-fullscreen-control" style="background: rgb(255, 255, 255); margin: 10px; padding: 0px; border-radius: 2px; border: 0px; border-image: none; top: 30px; width: 40px; height: 40px; right: 0px; overflow: hidden; position: absolute; cursor: pointer; box-shadow: 0px 1px 4px -1px rgba(0,0,0,0.3); -ms-user-select: none;" draggable="false" aria-label="Toggle fullscreen view" type="button">
<img style="width: 18px; height: 18px;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%20018%2018%22%3E%0A%20%20%3Cpath%20fill%3D%22%23666%22%20d%3D%22M0%2C0v2v4h2V2h4V0H2H0z%20M16%2C0h-4v2h4v4h2V2V0H16z%20M16%2C16h-4v2h4h2v-2v-4h-2V16z%20M2%2C12H0v4v2h2h4v-2H2V12z%22%2F%3E%0A%3C%2Fsvg%3E%0A">
<img style="width: 18px; height: 18px;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%3E%0A%20%20%3Cpath%20fill%3D%22%23333%22%20d%3D%22M0%2C0v2v4h2V2h4V0H2H0z%20M16%2C0h-4v2h4v4h2V2V0H16z%20M16%2C16h-4v2h4h2v-2v-4h-2V16z%20M2%2C12H0v4v2h2h4v-2H2V12z%22%2F%3E%0A%3C%2Fsvg%3E%0A">
<img style="width: 18px; height: 18px;" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%3E%0A%20%20%3Cpath%20fill%3D%22%23111%22%20d%3D%22M0%2C0v2v4h2V2h4V0H2H0z%20M16%2C0h-4v2h4v4h2V2V0H16z%20M16%2C16h-4v2h4h2v-2v-4h-2V16z%20M2%2C12H0v4v2h2h4v-2H2V12z%22%2F%3E%0A%3C%2Fsvg%3E%0A">
</button>
Has anyone come up with such a situation and found the root cause.
Please note that, this issue recreates only on salesforce sandbox. It works fine on salesforce production.
