Mouse wheel on google maps zooms map and scrolls page



Tech Evangelism
6 years ago
a year ago


(Reporter: Krzysiek Grzembski, Unassigned)


Firefox Tracking Flags

(Not tracked)


(Whiteboard: [testday-20110826] , URL)


(1 attachment)



6 years ago
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:6.0) Gecko/20100101 Firefox/6.0
Build ID: 20110811165603

Steps to reproduce:

Zoom google map using mouse wheel.

Actual results:

Mouse scroll on goole maps zooms map and scrolls page if page height is greater than viewport height. I found bug #680884 but new profile doesn't work for me.

I also tried to catch mouse scroll event and stop propagation but it does'nt work when using mouse wheel over google map. Strange is that when i scroll over map components (like zoom bar, google logo  etc.) i can catch this event and cancel it.

Because itg happened on map embeded by me i tried other maps over the Internet and on every map it works the same way. 

Windows 7: 6.1.7601 Service Pack 1 Compilation 7601
Processor:	Intel(R) Core(TM) i5-2400 CPU @ 3.10GHz, 3101 MHz, Cores: 4

Expected results:

When using mouse wheel over google map map should zoom in/out but page shouldn't scroll.

Comment 1

6 years ago
What do you mean by this: "page height is greater than viewport height" ? How can we get into this state?

Comment 2

6 years ago
I meant "document height is ...". Eg. code:


<!DOCTYPE html>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src=""></script>
        <script type="text/javascript">
        window.onload = function(){
            var latlng = new google.maps.LatLng(52.25, 21.01);
            mapOptions = {
                zoom: 12,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                streetViewControl: false,
            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        <p style="height:1000px;">-lot of text-</p>
        <div id="map_canvas" style="width:500px; height:500px;"></div>
        <p style="height:1000px;">-lot of text-</p>


I also noticed that behavior depends on scrolling speed. When i scroll really slow (eg. 1 zoom-level per .5 sec) firefox will allways scroll page with zoom. When i scroll fast it will "lock" on map and zoom only.

There is one more thing. When Fx "lock" on map (by lock i mean zoom without scrolling) it will zoom without scrolling page till next maousewhee outside map.

Comment 3

6 years ago
Created attachment 555376 [details]
Testcase from comment 2

Confirming on this testcase. The page scrolls only on some of the wheel revolutions, not always. Tested on FF6, Win XP.


6 years ago
Component: General → Event Handling
Ever confirmed: true
Product: Firefox → Core
QA Contact: general → events

Comment 4

6 years ago
Regression window(cached m-c hourly)
Mozilla/5.0 (Windows NT 5.1; rv:6.0a1) Gecko/20110523 Firefox/6.0a1 ID:20110523073652
Mozilla/5.0 (Windows NT 5.1; rv:6.0a1) Gecko/20110523 Firefox/6.0a1 ID:20110523080521
Keywords: regression
Um, this isn't actually a regression. I can see this bug on Mac too.

The problem is, Google probably doesn't handle pixel scroll event and call preventDefault() of them.

Comment 6

6 years ago
Can you write some more details? If it isn't Fx bug then i can fill bu for Google Map but it would be better to add as much informations as possible.

Comment 7

6 years ago
I do not see it on Linux, FF7.
Whiteboard: [testday-20110826]

Comment 8

6 years ago
This probably needs support for pixel scrolling, which we don't, IIRC, have on Linux.

Comment 9

6 years ago
I observed this problem on
using Aurora 8.0a2 (2011-09-15) on Windows XP 32 bit.
If we implement D3E wheel event, we can fix this bug without any change in web sites. Smaug, is the spec stable enough?
Er, but I'm not sure whether these sites support D3E wheel event...

Comment 12

6 years ago
Any progress? It's quite annoing. :/
this is a bug in Google Maps.

Comment 14

6 years ago
Reproduces in 11.0a1 (2011-12-04) exactly as described.

Also setting platform to "All" based on the comment that it also occurs on a Mac.
OS: Windows 7 → All
Hardware: x86_64 → All
Version: 6 Branch → Trunk

Comment 15

5 years ago
I'm also trying to intercept the bubbeling of DOMMouseScroll like this:

var mouseScrollStop = function (e) {
  if (e) {
    if (e.preventDefault) e.preventDefault();
    e.returnValue = false;
  return false;
if (window.addEventListener) {
  $googlemap[0].addEventListener("mousewheel", mouseScrollStop, false);
  $googlemap[0].addEventListener("DOMMouseScroll", mouseScrollStop, false);
else if (elem.attachEvent) {
  $googlemap[0].attachEvent("onmousewheel", mouseScrollStop);

This works as expected in IE9 and IronChrome17. In Firefox 11, it works until the mouse leaves the #googlemap, then the event will never fire again. I couldn't find out, if it's really a Firefox bug, or a Google Maps Firefox hack.

Comment 16

5 years ago
This most likely a google maps bug. I wrote also a comment on

"I can reproduce this strange behavior (without a google map) only, if I have a box, an inline-box and a handler (on the inline-box), that does event.stopPropagation without event.preventDefault. Then my handler (on the box) won't be called and no one does preventDefault."

Comment 17

5 years ago
Have worked a workaround, that works without re-zooming, re-scrolling or something.

This workaround doesn't smell like a bad hack and proves that it isn't a Firefox bug.
I tested on the testcase with D3E WheelEvent fixed build. However, the scrolling occurs unexpectedly. So, anyway, Google needs to fix this bug on their side.
You can see same behavior on this testcase:

If you only prevents DOMMouseScroll event (by selecting the list item), you can see scroll when you turned your wheel slowly. The reason is, if a native wheel event caused less than one line, only MozMousePixelScroll event is fired. Then, the event isn't consumed and it causes the unexpected scroll.
This is really website's bug, not ours. So, moving this to Tech Evangelism.

On the other hand, currently, almost all browsers support wheel event. So, if google map already listens wheel event, this bug must have gone.
Component: Event Handling → Desktop
Product: Core → Tech Evangelism
Version: Trunk → unspecified
Keywords: regression
Hm.. so our message to Google is "listening to DOMMouseScroll and preventing its default action is not sufficient to prevent page scrolling. You must also listen to MozMousePixelScroll"

This API sounds a bit weird.. I'd expect handling DOMMouseScroll to be sufficient. Why not?
(In reply to Hallvord R. M. Steen [:hallvors] from comment #21)
> Hm.. so our message to Google is "listening to DOMMouseScroll and preventing
> its default action is not sufficient to prevent page scrolling. You must
> also listen to MozMousePixelScroll"
> This API sounds a bit weird.. I'd expect handling DOMMouseScroll to be
> sufficient. Why not?

DOMMouseScroll is fired only when accumulated delta value becomes larger than one line. However, MozMousePixelScroll is even when the delta value is less than 1 line. For example, if line height is 16px and native mouse wheel event is fired per 1px, then, the fired DOM events are: MozMousePixelScroll * 15 -> DOMMouseScroll * 1 -> MozMousePixelScroll * 1. In the original report, first 15 MozMousePilxelScroll events are not consumed by Google Maps and cause scrolling.

However, fortunately, nowadays, almost all browsers new "wheel" event:

So, if Google Maps listens and handles this event, the reported bug must have gone. I'm not sure if this is still reproduced on Google Maps.
See and following comments...
tl;dr - Use the standard "wheel" event in favor of "DOMMouseScroll" and "MozMousePixelScroll" events.

Note that "DOMMouseScroll" is a Gecko-specific event. (Admittedly the name is confusing.)


a year ago
I'm willing to close this as WORKSFORME.

 Krzysiek, Does it work now?
Flags: needinfo?(mynthon1)


a year ago
Whiteboard: [testday-20110826] → [testday-20110826] [notcontactready]

Comment 25

a year ago
Yes, it looks like it's fixed now and can be closed.
Flags: needinfo?(mynthon1)
wonderful. Thanks.
Last Resolved: a year ago
Resolution: --- → WORKSFORME
Whiteboard: [testday-20110826] [notcontactready] → [testday-20110826]
You need to log in before you can comment on or make changes to this bug.