Last Comment Bug 681200 - Mouse wheel on google maps zooms map and scrolls page
: Mouse wheel on google maps zooms map and scrolls page
Product: Tech Evangelism
Classification: Other
Component: Desktop (show other bugs)
: unspecified
: All All
-- normal with 6 votes (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
Depends on:
  Show dependency treegraph
Reported: 2011-08-23 00:29 PDT by Krzysiek Grzembski
Modified: 2016-09-04 18:29 PDT (History)
14 users (show)
See Also:
Crash Signature:
QA Whiteboard:
Iteration: ---
Points: ---

Testcase from comment 2 (1002 bytes, text/html)
2011-08-24 05:59 PDT, :aceman
no flags Details

Description User image Krzysiek Grzembski 2011-08-23 00:29:23 PDT
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 User image :aceman 2011-08-24 04:00:02 PDT
What do you mean by this: "page height is greater than viewport height" ? How can we get into this state?
Comment 2 User image Krzysiek Grzembski 2011-08-24 04:54:20 PDT
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 User image :aceman 2011-08-24 05:59:15 PDT
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.
Comment 4 User image Alice0775 White 2011-08-24 22:31:50 PDT
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
Comment 5 User image Masayuki Nakano [:masayuki] 2011-08-24 22:59:04 PDT
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 User image Krzysiek Grzembski 2011-08-25 03:06:27 PDT
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 User image :aceman 2011-08-26 10:38:16 PDT
I do not see it on Linux, FF7.
Comment 8 User image Olli Pettay [:smaug] 2011-08-26 11:02:05 PDT
This probably needs support for pixel scrolling, which we don't, IIRC, have on Linux.
Comment 9 User image Ronald Tilby 2011-09-15 19:45:47 PDT
I observed this problem on
using Aurora 8.0a2 (2011-09-15) on Windows XP 32 bit.
Comment 10 User image Masayuki Nakano [:masayuki] 2011-09-15 20:15:04 PDT
If we implement D3E wheel event, we can fix this bug without any change in web sites. Smaug, is the spec stable enough?
Comment 11 User image Masayuki Nakano [:masayuki] 2011-09-15 20:16:14 PDT
Er, but I'm not sure whether these sites support D3E wheel event...
Comment 12 User image Jan Skrasek 2011-12-04 13:21:59 PST
Any progress? It's quite annoing. :/
Comment 13 User image Olli Pettay [:smaug] 2011-12-04 13:24:50 PST
this is a bug in Google Maps.
Comment 14 User image Roman 2011-12-05 05:04:49 PST
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.
Comment 15 User image metadings 2012-04-10 05:55:02 PDT
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 User image metadings 2012-04-18 17:22:28 PDT
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 User image metadings 2012-05-23 08:15:38 PDT
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.
Comment 18 User image Masayuki Nakano [:masayuki] 2012-07-11 20:25:35 PDT
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.
Comment 19 User image Masayuki Nakano [:masayuki] 2012-07-11 20:47:09 PDT
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.
Comment 20 User image Masayuki Nakano [:masayuki] 2015-07-19 18:46:08 PDT
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.
Comment 21 User image Hallvord R. M. Steen [:hallvors] 2015-07-20 04:13:58 PDT
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?
Comment 22 User image Masayuki Nakano [:masayuki] 2015-07-20 18:59:06 PDT
(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...
Comment 23 User image Masatoshi Kimura [:emk] 2015-07-20 20:00:25 PDT
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.)
Comment 24 User image Karl Dubost :karlcow 2016-09-01 18:59:46 PDT
I'm willing to close this as WORKSFORME.

 Krzysiek, Does it work now?
Comment 25 User image Krzysiek Grzembski 2016-09-02 23:46:39 PDT
Yes, it looks like it's fixed now and can be closed.
Comment 26 User image Karl Dubost :karlcow 2016-09-04 18:29:06 PDT
wonderful. Thanks.

Note You need to log in before you can comment on or make changes to this bug.