Last Comment Bug 681200 - Mouse wheel on google maps zooms map and scrolls page
: Mouse wheel on google maps zooms map and scrolls page
Status: NEW
[testday-20110826]
:
Product: Tech Evangelism
Classification: Other
Component: Desktop (show other bugs)
: unspecified
: All All
: -- normal with 8 votes (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
Mentors:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2011-08-23 00:29 PDT by Krzysiek Grzembski
Modified: 2015-07-20 20:00 PDT (History)
13 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---


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

Description 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 :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 Krzysiek Grzembski 2011-08-24 04:54:20 PDT
I meant "document height is ...". Eg. code:

{{{

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>test</title>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></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,
                zoomControl:true,
                mapTypeControl:false
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        }
        </script>
    </head>

    <body>
        <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>
    </body>
</html>


}}}

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 :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 Alice0775 White 2011-08-24 22:31:50 PDT
Regression window(cached m-c hourly)
Works:
http://hg.mozilla.org/mozilla-central/rev/0ad1aae1c559
Mozilla/5.0 (Windows NT 5.1; rv:6.0a1) Gecko/20110523 Firefox/6.0a1 ID:20110523073652
Fails:
http://hg.mozilla.org/mozilla-central/rev/76a9a3ca4523
Mozilla/5.0 (Windows NT 5.1; rv:6.0a1) Gecko/20110523 Firefox/6.0a1 ID:20110523080521
Pushlog:
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=8b60dc275a20&tochange=76a9a3ca4523
Comment 5 Masayuki Nakano [:masayuki] (Mozilla Japan) 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 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 :aceman 2011-08-26 10:38:16 PDT
I do not see it on Linux, FF7.
Comment 8 Olli Pettay [:smaug] (high review load, please consider other reviewers) 2011-08-26 11:02:05 PDT
This probably needs support for pixel scrolling, which we don't, IIRC, have on Linux.
Comment 9 Ronald Tilby 2011-09-15 19:45:47 PDT
I observed this problem on http://www.applebees.com/locations
using Aurora 8.0a2 (2011-09-15) on Windows XP 32 bit.
Comment 10 Masayuki Nakano [:masayuki] (Mozilla Japan) 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 Masayuki Nakano [:masayuki] (Mozilla Japan) 2011-09-15 20:16:14 PDT
Er, but I'm not sure whether these sites support D3E wheel event...
Comment 12 Jan Skrasek 2011-12-04 13:21:59 PST
Any progress? It's quite annoing. :/
Comment 13 Olli Pettay [:smaug] (high review load, please consider other reviewers) 2011-12-04 13:24:50 PST
this is a bug in Google Maps.
Comment 14 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 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 metadings 2012-04-18 17:22:28 PDT
This most likely a google maps bug. I wrote also a comment on code.google.com: http://code.google.com/p/gmaps-api-issues/issues/detail?id=3652#c11

"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 metadings 2012-05-23 08:15:38 PDT
Have worked a workaround, that works without re-zooming, re-scrolling or something. 

http://stackoverflow.com/questions/7122826/google-maps-in-firefox6-zooms-znd-scrolls-page/10617310#10617310

This workaround doesn't smell like a bad hack and proves that it isn't a Firefox bug.
Comment 18 Masayuki Nakano [:masayuki] (Mozilla Japan) 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 Masayuki Nakano [:masayuki] (Mozilla Japan) 2012-07-11 20:47:09 PDT
You can see same behavior on this testcase:
https://bugzilla.mozilla.org/attachment.cgi?id=589763

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 Masayuki Nakano [:masayuki] (Mozilla Japan) 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 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 Masayuki Nakano [:masayuki] (Mozilla Japan) 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:
https://developer.mozilla.org/en-US/docs/Web/Events/wheel

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 https://code.google.com/p/gmaps-api-issues/issues/detail?id=3652#c25 and following comments...
Comment 23 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.)

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