Using Column CSS Property with Google Maps in Chrome: A Potential Bug?

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

Note: This works fine in Firefox and Safari.

htmlcssgoogle-mapsgoogle-chrome

Answer №1

When troubleshooting layout issues like these, my go-to approach is to inspect the HTML structure first. I observed that both objects were contained within the same div, and upon separating them into two distinct divs, the issue was resolved.

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling with implementing responsive mobile buttons that stack in a column? Here's the solution

My content is nearly responsive on all screen sizes, but I'm having trouble getting the buttons to stack neatly in a column. Can anyone provide suggestions on how to fix this issue? You can view the current progress below. Thank you in advance for any ...

htmlcssresponsivescreen-sizedevice-width

Activate video in Slick Slider with the click of a button

I am facing an issue with my slider setup, where each slide contains a video as the background along with play/pause buttons. When I try to play the video by clicking the corresponding button on a specific slide, I encounter this problem: if I click the pl ...

javascriptjqueryhtmlvideoslick.js

Every time I refresh the page, new data is inserted into the MySQL database

After clicking the button, I expect data to be inserted into my MySQL database. However, it only inserts the data when I manually reload the page. Below is the code snippet: <script> function minuscredits() { alert("hah"); <?php mysql ...

phphtmlmysqlfunction

Python Selenium- Extract and print text from a dynamic list within a scrolling dropdown element

I am currently working on a project using Selenium and Python to extract a list of company names from a dropdown menu on a javascript-driven webpage. I have successfully managed to reveal the list of company names by clicking the navigation button, and eve ...

javascriptjquerypythoncssselenium

I am experiencing an issue where the custom form validation directive in AngularJS is not functioning properly within my modal

To enhance the validation of my input boxes, I created a custom directive called nx-validate. This directive is designed to be added to a bootstrap div.form-group, which will then check if the <input/> field is $dirty or $invalid, and apply the appro ...

javascriptangularjshtmltwitter-bootstrapangularjs-directive

A hover effect in CSS that utilizes a psuedo element to overlay the primary element

When hovering, I want to achieve an effect that looks similar to the display below: To view my website, click here The relevant code is shown below with the !important attributes removed: .cta-button-menu, .cta-button-menu::before { transitio ...

htmlcsswordpress

Navigate within the div by scrolling in increments of 100%

I am facing an issue with a div that contains multiple children set to 100% height. My goal is to scroll exactly the height of one child (which is also 100%) on each scroll. However, I am struggling to prevent scrolling multiple steps at a time. I have tri ...

javascriptjqueryhtml

Validate the presence of an element on a page using selenium

I attempted to use the following code: if driver.find_element_by_xpath("/html/body/div[2]/div[3]/div[1]/div[1]/button"): pass believing it would be successful, however it did not work and instead resulted in: selenium.common. ...

pythonhtmlseleniumwebdriver

Implementing HTML tags in C# code

Below is an example of HTML script: <h1> This is heading one </h1> <p> This is paragraph. </p> I would appreciate any recommendations on how to add <html></html> tags to the above script using C#. ...

c#htmlvisual-studio-2010

SVG: Altering the dy attribute has no impact on the overall height of the bounding rectangle for the parent text

We are striving to align a group of tspan elements both vertically and horizontally. However, the parent container is not taking into consideration dy values. This lack of consideration is leading to alignment issues. If you adjust the dy values in this ...

javascripthtmlsvg

Utilizing Google APIs to split a route among multiple locations

I am facing a scenario where A laundry company operates from one shop location. The laundry company has 3 trucks available (n trucks). The laundry company needs to deliver washed clothes to multiple locations (n locations). Using the Google Directions AP ...

javascriptnode.jsgoogle-mapsgoogle-maps-api-3google-maps-markers

Customizing the appearance of a JavaScript countdown timer's output on an individual basis

I am currently working on customizing the appearance of a JavaScript date counter. My goal is to style the days, hours, minutes, and seconds individually. Ideally, I want each unit to be right-aligned within its own div, with specific left and top absolute ...

javascripthtmlcss

Reorganize a list based on another list without generating a new list

Among the elements in my HTML list, there are items with text, input fields, and tables. I also have a specific order list like [3,1,2,0]. Is it feasible to rearrange the items in the HTML list on the page based on this order list without generating a new ...

javascripthtmljquerycss

The intricate dance between JAVA and HTML

Can Java be compatible with HTML and JS? Is it possible for them to cooperate without using JSP? In order to connect the WEKA function, we utilized Java code through a JAR file, but now we also require HTML and JS links for visualization. Is there an alte ...

javascriptjavahtmljsp

Can the <container> block be positioned beneath the <header> block?

header { background: blue; color: white; width: 100%; } .container { background: green; text-align: center; width: 100%; height: 100px; transform: skew(0, -10deg); color: white; position: relative; top: 55px; } .container .home{ p ...

htmlcss

PHP is unable to match a CAPTCHA code with the string entered by the user

I've developed a login system along with a CAPTCHA string that randomly generates characters in the form A1B2C3, containing uppercase and lowercase letters. Below is the code snippet: $cArr1 = array_merge(range("a", "z"), range("A", "Z")); $cArr2 = r ...

phphtmlstringcaptcha

Achieving success with the "silent-scroll" technique

I've been struggling to implement the 'scroll-sneak' JavaScript code for quite some time now. This code is designed to prevent the page from jumping to the top when an anchor link is clicked, while still allowing the link to function as inte ...

javascriptjqueryhtmlcss

Clickable link remains functional after being hidden

Even though I have hidden the Games-div using the .hide() function in jQuery, my links are still clickable. Is there a way to make them unclickable after being hidden? Here is the link to my code on jsFiddle: http://jsfiddle.net/hypertje/Frv8G/ Note: The ...

jqueryhtmlcss

downsides of scrolling text functionality

Sure, it may seem evil. But what makes it so? Is it because all browsers support it? Which aspx asp.net controls are restricted in this tag? What are the reasons for avoiding this tag? ...

htmlmarquee

Replacing the content of li elements

I have come up with a code snippet that generates li elements with input values after submitting the form. However, there is an issue where if you start typing in the input field again, it will overwrite all existing li elements. import './App.css&apo ...

htmlcssreactjs