Google maps conflicting with bootstrap font css in Chrome -
to start off, i've tested below code in of major browsers; chrome, firefox, ie, , safari.
the exact problem far occurs in chrome when google maps included in page, , when giving focus navbar link(either through click or through chrome dev tools), color of links fades slight amount.
i've tried numerous 'fixes' i've found through research. name few:
- why embedded google map altering safari's font rendering?
- google maps v3 - prevent api loading roboto font
- bug: visualrefresh causes roboto web font reloaded/redefined
i've been doing testing(save prior mentioned browsers) on chrome v43.0.2357.132 m.
to question haven't asked yet, aware of fix or work-around this?
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 span, nav { 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>
add links text-shadow:0 1px 2px rgba(0,0,0,.9);filter:alpha(opacity=90);opacity:.9;
demo: http://po0.co.uk/daed.php
Comments
Post a Comment