1186731 - Google Maps hover is offset by other items in page's layout

Status: RESOLVED DUPLICATE of bug 1175863

(Firefox :: Untriaged, defect)

Description

[Bass]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:39.0) Gecko/20100101 Firefox/39.0
Build ID: 20150630154324

Steps to reproduce:

Created custom website which highlights polylines and polygons when you hover over them.

This happens on both the website I built:
http://www.sawtoothtrails.com
... hover over the regions in the map and the regions should highlight (based on the code I have written).

Same issue on another Google Maps based website:
http://summertrailink.bcrd.org

And on this fiddle that a user on StackOverflow created:
http://codepen.io/massic80/pen/WvgKym
... hover over the countries and they should highlight (based on the code in the fiddle).

VERY IMPORTANT: this bug doesn't happen on other browsers (Chrome, Safari, IE), only happens on version 39 of Firefox for Windows and for Mac. To be specific, this does *NOT* happen on 38.0.1 on Mac, does *NOT* happen on 37.0.2 or 38.1.0ESR on Windows).

This also only appears to be happening on Google Maps based sites... I have a Bing Maps based site (internal so can't share the link) that appears to manage hover events correctly.


Actual results:

When you hover over a particular spot the Google Maps functionality is "offset" by CSS applied to HTML objects above the maps canvas.

In the website (Sawtooth trails) above, when you hover over a specific spot the actual functionality executed by Google Maps is like you're hovering further down and further to the right than you actually are... this is because there are left margins to the map canvas and there is content above the map canvas. If I remove all content above and to the left of the map canvas (basically making the map canvas start in the very upper lefthand corner of the page) then this issue is no longer happens.

In the fiddle above, when you hover over a specific spot the actual functionality the map executes is like you're hovering over a spot 200px lower down (because there is a DIV above the map canvas div that has a height of 200px) and 100px to the right (because the map canvas div has a left-margin of 100px).

This is only the "HOVER" event, the "CLICK" event fires correctly.




Expected results:

What should have happened is when you hover over a specific spot Google Maps is able to correctly interpret that location without being confused by widths / heights / margins / padding of CSS items that are loaded before the Google Maps canvas is loaded.

Comment 1

[Massimiliano Caniparoli]

I reported this on StackOverflow, and confirm Bass' analysis, in particular on Firefox versions.
Looks like this is a regression.

Comment 2

[Loic]

Known issue.
Workaround:
<script src="http://maps.google.com/maps/api/js?v=3"></script> with v=3 at the end.