Safari on Mac Scroll Wheel does not Zoom In/Out it pan's North South.

AaronConnolly · ‎06-27-2012

Has anyone noticed that v2.8's maps pan north/south rather than zoom in/out with a mouse's scroll wheel on a Mac in Safari? My application does this however Google Maps does not. Is this a hardware issue? An OS X setting (I couldn't find one) or something else?

Our map's isScrollWheelZoom is not explicitly set when we create a map. It is set by default.

Thanks,
- Aaron

AaronConnolly · ‎06-27-2012

To reproduce this, load this HTML in your browser and test on a Mac OS X Lion using Safari. Then using your mouse's scroll wheel scroll in and out. Notice that the map pans instead.

[HTML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7" />

<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Test Map Scroll</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map { margin: 0; padding: 0;}
</style>
<script type="text/javascript">
    var djConfig = {
        parseOnLoad: true
    };
</script>

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script>
<script type="text/javascript">

    dojo.require("esri.map");
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.ContentPane");

    function init() {

        var map = new esri.Map("map",
            { extent: esri.geometry.geographicToWebMercator(new esri.geometry.Extent(-95.2991, 38.9379, -95.2476, 38.963, new esri.SpatialReference({ wkid: 4326 }))),
                isScrollWheelZoom : true
             });

        dojo.connect(map, 'onLoad', function (map) {
            //resize the map when the browser resizes
            dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
        });

        var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
        map.addLayer(tiledMapServiceLayer);
    }

    dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:100%;">
    <div id="map" dojotype="dijit.layout.ContentPane" region="center">
</div>
</div>
</body>
</html>
[/HTML]

KellyHutchins · ‎06-27-2012

At version 2.7 we updated how default map navigation works when using an Apple trackpad or magic mouse. Details about this are here:

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp/intro_navigation.htm

I use a magic mouse with my mac so I haven't tested this behavior with a scroll wheel - if you press the shift button while using the scroll wheel does your map zoom in/out?

AaronConnolly · ‎06-27-2012

At version 2.7 we updated how default map navigation works when using an Apple trackpad or magic mouse. Details about this are here:

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp/intro_navigation.htm

I use a magic mouse with my mac so I haven't tested this behavior with a scroll wheel - if you press the shift button while using the scroll wheel does your map zoom in/out?

Thanks Kelly, I'll take a look through those docs. I looked in the 3.0 release notes, but didn't notice anything for this particular issue. It does work with an accompanying shift button press. But this is misleading. I guess if it works for folks with Apple peripherals, we'll be OK. I'm using a Microsoft mouse which might be part of the issue and probably puts me in a small percentage of the people out there with this configuration. Was just curious if this were an ESRI issue because this works with Google Maps as well as all the other browsers in my Mac. Only Safari pans the map on a mouse wheel scroll.

AaronConnolly · ‎06-28-2012

It looks like there isn't anything we can do about this. There is no way, according to the docs, to disable the default behavior of the pan w/ a scroll wheel. You can either disablePan() or enablePan(), that is all.

Bummer