Web Application not responding to touchscreen

3795
9
Jump to solution
09-07-2018 07:42 AM
CliffParker
New Contributor II

I have a web application that has now become unresponsive to panning and zooming when trying to use the touchscreen functionality on a device. This has occurred sometime over the last month. Everything was working normally before this occurred. I have tested this on 2 different machines from different manufacturers and it does not work on either one of them,so I believe that it has to be something with the applications itself. The buttons on the web app work fine, it's just when the user tries to pan or zoom with their fingers. 

I should also note that one of the machines has a stylus and the pan/zoom functionality works with the stylus. I have looked at the touchscreen settings on each machine and they appear to be set up correctly. I've also looked at the settings within the web app itself, but there isn't much there to configure and there is nothing about any touchscreen functionality.

Has anybody else seen this issue? Any ideas on how to fix it?

Thanks,

0 Kudos
1 Solution

Accepted Solutions
RussRoberts
Esri Notable Contributor
9 Replies
CliffParker
New Contributor II

Note: We primarily use Google Chrome and this is the browser that it is not working in. I have tested with Firefox and Safari and it IS working in those browsers. So this leads me to believe that there is a problem with the application in Chrome. This problem was reported before the big upgrade to Chrome this past week, so I don't think that has anything to do with the problem. 

Also, I have tested other web maps and they also aren't panning/zooming in Chrome, but they are responsive in the other browsers.

0 Kudos
vinodhkumarramamoorthy
New Contributor

i have similar issue in chrome, especially the drag map feature in touch screen.

i have posted my issue in google chrome forum and no reply yet.

https://productforums.google.com/forum/?utm_medium=email&utm_source=footer#!msg/chrome/9V9M2xhJ0CY/d...

Google Groups 

i never see any good responses on ESRI community either. 

pls update me when you get a change to resolve this. i will do same.

vinodhkumarramamoorthy
New Contributor

it is not only our maps. all the ESRI maps have this touch screen issue. whereas google maps doesnt have it.

it is ESRI maps + google chrome issue.

sample esri web map - http://storymaps.esri.com/stories/2012/precincts-2008/  

CliffParker
New Contributor II

Yes. I agree that this is a Google Chrome and ESRI Web issue. I will definitely respond if we find a solutions. Thanks for posting onto the Google forums.

Our work around right now is for the user's to use Firefox instead of Chrome. We would like to go back to Chrome for the other benefits is provides, but are stuck forcing our users to use Firefox for now.

0 Kudos
RussRoberts
Esri Notable Contributor

This has been fixed in the JS API see this thread with the bug ID.

https://community.esri.com/thread/219627-problems-with-api-javascript-35-fro-arcgis-using-pan-and-zo... 

CliffParker
New Contributor II

Thank you for supplying the link to this thread. It looks like the JS in our AGOL just upgraded to 3.26 and now the maps are working again.

0 Kudos
VictorGonzalez6
New Contributor II

Hello Russel, I have a similar problem, touch control is not working on Chrome mobile on android and Chrome desktop (using mobiles emulators). My web application is using arcgis javascript api 4.14 and angular 8 with types/arcgis-js-api@4.14.0 and esri-loader@2.13.0. Any idea if this was solved? Thanks for your help

0 Kudos
VictorGonzalez6
New Contributor II

These are the chrome version I test:

Version 81.0.4044.113 (Official Build) (64-bit) Linux Ubuntu 18.04

Version 81.0.4044.122 (Official Build) (64-bit) Windows 10

0 Kudos
VictorGonzalez6
New Contributor II

Hello, I found what was the problem: I had not imported the require css, in order to load it just put setDefaultOptions({css: true}) before loadModules, for example:

import { setDefaultOptions, loadModules } from 'esri-loader'; // before loading the modules for the first time,// also lazy load the CSS for the version of// the script that you're loading from the CDNsetDefaultOptions({ css: true }); loadModules(['esri/views/MapView', 'esri/WebMap'])   .then(([MapView, WebMap]) => {     // the styles, script, and modules have all been loaded (in that order)  });

after that it worked!