I'm facing an interesting issue and I could use some help understanding or fixing it. It seems like there might be a bug or a solution to this problem. I am currently working on a layout using the CSS3 property columns. Everything looks fine in Firefox and Safari, but in Google Chrome, the events from the maps (like dragging) are overlapping with my other columns. You can view the problem in action by checking out this jsfiddle link http://jsfiddle.net/bcwfqxp5/, or you can run the following snippet:
google.maps.event.addDomListener(window, "load", function() {
new google.maps.Map(document.getElementById("map_div"), {
center: new google.maps.LatLng(33.808678, -117.918921),
zoom: 14,
});
});.twoColumns {
columns: 2;
}
.twoColumns>* {
break-inside: avoid;
page-break-inside: avoid;
}
.anyContent {
display: block;
background: yellow;
height: 300px;
}
#map_div {
overflow: hidden;
position: relative;
}<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<div class="twoColumns">
<div class="anyContent">Why can I drag here in Chrome?</div>
<div id="map_div" style="height: 300px;"></div>
</div>Note: This works fine in Firefox and Safari.