Свойство столбцов CSS и Google Maps в Chrome (ошибка или нет?)

Question

У меня любопытная проблема, Может быть, кто-то может помочь мне исправить или понять это.Я не знаю, является ли это ошибкой или есть способ ее решить, но я создаю макет со свойством css3 columns, и все нормально в Firefox и Safari, но в Google Chrome, события карт (перетащите) перекрывают другие мои столбцы, вы можете увидеть проблему в jsfiddle http://jsfiddle.net/bcwfqxp5/ или в следующем фрагменте кода:

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&amp;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>

Примечание. Это нормально работает в Firefox и Safari

Answer 1

Для таких типов проблем с макетом я всегда сначала смотрю на HTML, и я заметил, что у вас оба объекта в одном и том же div, и это сработало, когда я разделил их на два div.

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 {
float: left;
width: 50%;
}

.anyContent {
  display: block;
  background: yellow;
  height: 300px;
  z-index: 2;
}

#map_div {
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>

<div class="row">
<div class="twoColumns">
  <div class="anyContent">Why can I drag here in Chrome?</div>
</div>
<div class="twoColumns">
  <div id="map_div" style="height: 300px;"></div>
</div>
</div>