Pan gestures are unresponsive on Android WebView

When hosting a jQuery DataTables table on a WebView, the pan gesture and scrolling do not function until a table header is clicked. This issue persists even with non-jQuery tables in JavaScript code – rendering the WebView unscrollable. Interestingly, attaching a Chrome debugger to the WebView activates scrolling functionality.

Upon testing the same code on Android Chrome browser, both local and remote JavaScript codes allow for scrolling. This suggests that there may be an inherent problem with the WebView itself. Initially, I considered the possibility of a swipe gesture collision, but since no swipe gestures are defined within the WebView activity, this theory seems unlikely.

Do you have any insights or ideas on how to address this issue?

javascriptandroidwebview

Answer №1

Feel free to share your code, Android WebView offers numerous features. Let's begin testing:

webView.getSettings().setBuiltInZoomControls(true);

Make sure to also verify that JavaScript is enabled.

I trust this information proves beneficial.

Answer №2

Discovered the root of the problem. It seems that there is a bug affecting WebViews specifically on KitKat (and older) versions of Android. However, everything runs smoothly on Lollipop.

To address the issue on KitKat, I implemented a workaround by refreshing the DOM:

 setTimeout(function() { 
     var htmlString = $( '#content' ).html(); 
     $('#content').html(htmlString); 
 }, 1000);

This action somehow reestablished "focus" on the DOM and resolved the panning gesture functionality.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Repeating every other item in a list using ng-repeat in AngularJS

Using AngularJS version 1.5.3 In my view, I have a list of items that I want to display. After every two items, I would like to show a new div below the first one. <div class="col text-center" ng-repeat="event in weekDay.events"> &nbsp;& ...

javascriptangularjsangularjs-ng-repeat

The date and time on Android devices are not appearing in the log cat output

Snippet for Retrieving Date and Time in Android-Java try { SimpleDateFormat sdf = new SimpleDateFormat( "yyyy-MM-dd", Locale.US); String currentDateandTime = sdf.format(new Date()); final Fi ...

javaandroiddatetime

Tips for sending a correctly encoded JSON response in Flask following a POST request

I am currently developing a web application using Flask. It retrieves data from a table in a MySQL server hosted on a Raspberry Pi. INITIALLY TESTED USING POSTMAN When creating the table, I ensured that the encoding in MySQL Workbench was set to utf-8 ...

androidmysqljsonutf-8flask

Steps for saving both checked and unchecked checkbox values in Firebase

I have a set of objects that I am using as initial data in my Ionic 3 application: public interests = [ { name: 'Travel', checked: false }, { name: 'Animals', checked: false }, { name: 'Theatre', checked: false ...

javascriptfirebase-realtime-databaseionic3angularfire2

What is the process for transforming an array into an array object using javascript?

Here is a situation where I need to upload a text file that contains data in the following format: a1,b1,,c1,d1, a2,b2,,c2,d2, After reading and splitting the data with ("\n"), it results in an array like this: array=[array[0]:[a1,b1,,c1,d1] ...

javascriptarrayssplitarrayobject

Sorting Angular components in reverse alphabetical order from A to Z

I feel like the answer to this problem is staring me right in the face, but no matter how hard I look, I just can't seem to find it. When dealing with a large ng-repeat, I have multiple sort options that I pass as an array. The user has the ability t ...

javascriptangularjssorting

I noticed that my regular expression is functioning correctly on regex101, but for some reason, it's

My search works perfectly on regex101 using this link: https://regex101.com/r/z8JCpv/1 However, in my Node script, the third matched group array[2] is returning not only the matching text but also everything following it. An example line from the source ...

javascriptnode.jsregex

Getting Started with Parsing JSON Objects in ReactJS

In my ReactJS project, I am trying to parse through a JSON list using the following model: public class ModelEmployee { public List<Employeelist> Employees { get; set; } public int count { get; set; } public int Pagenumber { get; set; } ...

javascriptjsonreactjsreactjs.net

Positioning divs around a circle can be quite challenging

Among my collection of divs with various classes and multiple child divs representing guests at a table, each main div symbolizes a specific restaurant table type. I have created a jsfiddle for demonstration. http://jsfiddle.net/rkqBD/ In the provided ex ...

javascriptjquerycsshtml

Tap to smoothly scroll through each block using the animate() function

ul { padding: 0; margin: 0; height: 180px; overflow: auto; } li { height: 50px; background: pink; list-style: none; margin-bottom: 10px; height: 50px; ...

javascriptjquerycss

The JSON POST Method is not allowed for a Self-Hosted WCF REST service

After encountering countless "WCF" questions online, I am starting to believe that finding a solution is nearly impossible. Can someone prove me wrong? My current situation involves working with a Self Hosted WCF Service where endpoints are defined progra ...

javascriptc#jqueryjsonwcf

A pop-up modal that remains closed thanks to sessionStorage

I've been working on creating a modal that pops up after a short delay, but once closed, it shouldn't appear again unless the user closes the website and starts a new session. While I have successfully designed the modal, integrating sessionStora ...

javascript

The navigation bar becomes sticky and covers up the content as you scroll back to the

Issue with sticky navbar: The first home div displays correctly when the page loads. However, upon scrolling down and then back up, some content from the home div gets hidden behind the sticky nav bar at the top. How can this behavior be fixed? Looking for ...

javascripthtmlcss

Foreground and background discrepancy in FCM and Flutter (Node.js backend)

Library Dependencies : firebase_messaging: ^10.0.1 flutter_local_notifications: ^6.0.0 firebase_core: ^1.2.1 firebase_analytics: ^8.1.2 Challenge Scenario 1: While the application is active in the background but not completely closed or forcefully stoppe ...

androidiosnode.jsflutterfirebase-cloud-messaging

Here is a guide on how to develop a PHP function that interacts with a textarea to display text in the specified color by using syntax like [color:red]

Is it possible to code a PHP function that can work alongside a textarea to display text in the specified color by using a syntax like [color:red]? This function operates in a similar manner to Facebook's @[profile_id:0] feature. ...

javascriptphpjqueryhtmlajax

What could be causing res.redirect to fail?

I am currently facing an issue with making an http.post request from Angular to an API on the backend. After the post request, I am trying to redirect to another page but for some reason, the redirect is not working properly. I am looking for an alternat ...

javascriptangularjsnode.js

You can obtain the values of multiple div selections using jQuery

In a display with two columns, I want to be able to perform a common operation (such as delete) based on the selection of certain div IDs. If a user selects the div IDs participant_1, participant_4, participant_6 at the same time, I need to collect these ...

javascriptjquery

What is the best way to store a large amount of data in Node.js using JavaScript - should it be in an array, file, or elsewhere?

I have a question that may seem "stupid," but I am dealing with a large amount of data for the first time. My objective is to query the World Bank API. The issue lies in the inflexible nature of the API when it comes to searching and filtering. Querying ea ...

javascriptnode.jsapi

Managing multiple promises with multiple steps

I am looking to extract information from various sources. Once each dataset is obtained, I want to send it to a separate asynchronous processor such as a worker thread. After all processes are complete, I aim to combine the data and deliver it. Here is an ...

javascriptasynchronouspromise

Using $where in a MeteorJS collection query

I am working on a MeteorJS application that has a collection with a field named ticker. I am trying to use the $where statement to compare two fields within the same collection: Tickers.find({$where: function() { return (this.price < this.value); }}) ...

javascriptmongodbmeteor