javascript - google maps api conflicting with a div with background-attachment:fixed which overlaps it -
i have div background-attachment: fixed , div further down page position:fixed. working fine in ie11 , firefox 31.0 in in chrome div background-attachment: fixed scrolling image div , has large black blocks across image's full width, covering half image, in thick bars (like zebra if will)
if don't run google map js, or have background-attachment: scroll, or have position: static, works expect.
am doing wrong, bug in chrome? either way need find way make behave intended (fixed background image , fixed google maps div window) - either correction of code, or workaround 'bug' helpful.
(aside: have fixed div @ top nav bar isn't affecting issue. believe because not stack google map)
code in full: http://jsfiddle.net/chowie/rodx0v02/3/
html:
<div id="hobbiescontainer" class="sectioncontainer"> <section id="hobbiessection"> <a id="hobbies"><h4>hobbies</h4></a> <p class="keytext"> text content here </p> </section> </div> <div id="mapcontainer"> <div id="map"></div> </div> <div id="mapspace"></div>
css:
section { position: relative; z-index: 2; overflow:auto; padding: 0px; }
js:
function initialize() { var mapoptions = { center: new google.maps.latlng(51.5028397, -0.2521218), zoom: 15 }; var map = new google.maps.map(document.getelementbyid("map"), mapoptions); var marker = new google.maps.marker({ position: new google.maps.latlng(51.5028397, -0.2521218), map: map, icon: image, }); }
google maps ads inline style of transform: translatez(0px);
map container via javascript (which far can tell nothing whatsoever). overriding transform: inherit !important;
in stylesheet fixed me.
Comments
Post a Comment