I have thoroughly tested the following code in all major browsers, including Chrome, Firefox, IE, and Safari.
The issue I am encountering only seems to occur in Chrome when Google Maps is integrated into the page. When focusing on a navbar link (either by clicking or through Chrome developer tools), the color of the links appears to fade slightly.
I have attempted several solutions that I discovered through research, such as:
- Investigating how an embedded Google Map affects Safari's font rendering
- Preventing Google Maps v3 API from loading Roboto font
- Addressing the bug where visualRefresh causes reloaded/redefined Roboto web font
All my testing has been conducted on Chrome version 43.0.2357.132 m, apart from the mentioned browsers earlier.
Now to the question I've yet to pose: Does anyone know of a fix or workaround for this issue?
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 8,
center: {lat: -34.397, lng: 150.644}
});
}
google.maps.event.addDomListener(window, 'load', initialize);#map-canvas {
height: 400px;
margin-top: 51px;
width: 100%;
}
nav a.navbar-brand, nav a span, nav a {
color: #C52D2D !important;
}<script src="https://maps.googleapis.com/maps/api/js?v=3.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#">Link 1</a>
</li>
<li>
<a href="#">Link 2</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div id="map-canvas"></div>