Closed Bug 681200 Opened 13 years ago Closed 8 years ago

Mouse wheel on google maps zooms map and scrolls page

Categories

(Web Compatibility :: Site Reports, defect)

Product:
Web Compatibility
Component:
Site Reports
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED WORKSFORME

People

(Reporter: mynthon1, Unassigned)

References

(
URL
)

Details

(Whiteboard: [testday-20110826] )

Attachments

(1 file)

Testcase from comment 2
1002 bytes, text/html
Details 
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.
What do you mean by this: "page height is greater than viewport height" ? How can we get into this state?
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.
Confirming on this testcase. The page scrolls only on some of the wheel revolutions, not always. Tested on FF6, Win XP.
Status: UNCONFIRMED → NEW
Component: General → Event Handling
Ever confirmed: true
Product: Firefox → Core
QA Contact: general → events
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
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.
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.
I do not see it on Linux, FF7.
Whiteboard: [testday-20110826]
This probably needs support for pixel scrolling, which we don't, IIRC, have on Linux.
I observed this problem on http://www.applebees.com/locations
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...
Any progress? It's quite annoing. :/
this is a bug in Google Maps.
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
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.
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."
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.
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:
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.
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
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:
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...
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.)
I'm willing to close this as WORKSFORME.

 Krzysiek, Does it work now?
Flags: needinfo?(mynthon1)
Whiteboard: [testday-20110826] → [testday-20110826] [notcontactready]
Yes, it looks like it's fixed now and can be closed.
Flags: needinfo?(mynthon1)
wonderful. Thanks.
Status: NEW → RESOLVED
Closed: 8 years ago
Resolution: --- → WORKSFORME
Whiteboard: [testday-20110826] [notcontactready] → [testday-20110826]
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: