WebView on Android still showing highlighted text even after selection has been cleared

When using my web app on an android WebView, I've noticed that whenever I click on something or navigate somewhere, a blue highlight appears on the container div. It sometimes disappears quickly, but other times it remains until clicking elsewhere.

I'm uncertain if this issue is related to focus, tab order, WebView settings, or something entirely different.

To address this problem, I attempted adding the following CSS:

* {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-focus-ring-color: rgba(0, 0, 0, 0);
}

I also experimented with adjusting the webView Settings:

webSettings.setLightTouchEnabled(false);

Unfortunately, these attempts did not resolve the issue.

Is there a way to prevent WebView from focusing on these divs or make the highlight color invisible/transparent?

javascriptandroidhtmlcsswebview

Answer №1

For a WebView in an Android application, I implemented the following code:

* {
  -webkit-tap-highlight-color: transparent;
}

Answer №2

Did you experiment with the following CSS properties in your stylesheet?


-webkit-touch-callout: none;
-webkit-user-select: none;

If not, consider implementing them to achieve the desired effect. Additionally, you can find more information in this article: How to Disable Text Selection Using CSS

Although the topic is centered around text selection, it may offer some solutions for your specific situation.

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

Twilio Group MMS feature experiencing technical difficulties

I currently have a Twilio Trial account with an active number that supports SMS/MMS. My goal is to use this number for group MMS chats, but I am facing some challenges. After following a tutorial on Tut, I attempted to create a basic test using the provid ...

javascriptnode.jstwiliommstwilio-conversations

There was an unexpected error: Unable to access the 'bool' property of an undefined object

{ "name": "unique-react", "version": "2.0.1", "private": true, "scripts": { "start": "webpack-dev-server --hot --port 3002 --open --inline", "build": "cross-env NODE_ENV=production rimraf dist && webpack", "package": "webpack -p ...

javascriptreactjsnpmundefinedreact-proptypes

Removing selected items from a list-view

I have a custom list-view that pulls data from an external MySQL database. I am facing an issue with deleting data - when I check a specific checkbox and try to delete the data, it deletes all the records in the database instead of just the selected one. I ...

phpandroidmysqlandroid-listviewandroid-checkbox

React JS makes it simple to create user-friendly cards that are optimized

I have a collection of objects that include a name and description. The name is short and consists of only a few characters, while the description can vary in length. I am looking to showcase this data within Cards in my React project, and have tried using ...

javascriptcssreactjsreact-bootstrap

Tutorial on inserting a picture into muidatatables

Important Note: The image stored in the database is called "profileImage." I am looking to create a dynamic image object similar to other objects. When I input this code: { label: "Image", name: "profileImage" }, it simply displays the image endpoint as ...

javascriptreactjsmaterial-uimui-datatable

Guide on fetching and parsing JSON data in jQuery by utilizing a URL

As a newcomer to jquery, I am struggling to understand and parse the json format. In my icenium project, I have included this JavaScript function in my js folder but it doesn't seem to be functioning properly. $(document).ready(function () { ...

javajqueryhtml

Error in Android-twitter4j - no authentication challenges were detected

I successfully incorporated Twitter into my app (using OAuth and the twitter4j library) to allow users to update their statuses. Everything was working smoothly. Prior to posting a status, I first check the Shared Preferences for the stored AccessToken. I ...

androidtwittertwitter4jandroid-twitter

Display a large feather icon on the left side with the title and description positioned on the right side

I'm trying to achieve a flex-style UI that resembles this design: https://i.sstatic.net/2mFrm.png So far, I've managed to split the UI using col-5 col-2 col-5 classes from Bootstrap and utilize flex to create the col-5 UI sections (left and rig ...

htmlcssbootstrap-5

Cross domain widget ajax request

Our company offers a widget for clients to add to their websites. This widget requires a call to our website to validate user-entered data. However, due to domain restrictions, making ajax calls from the client's website to ours is not permitted. Is ...

javascriptphpajax

Implementing a New Port Number on a ReactJs Local Server Every Time

As a newcomer to ReactJS, I recently encountered an issue while working on a project that puzzled me. Every time I shut down my local server and try to relaunch the app in the browser using npm start, it fails to restart on the same port. Instead, I have ...

javascriptnode.jsreactjs

Firebase Issue in Next JS Authentication Flow: Unconfirmed Email Causes "auth/email-already-in-use" Error to Trigger

I have encountered a perplexing issue while setting up user registration with Firebase Authentication in my Next.js application. The problem arises when I try to register a new user with an unverified email address. Instead of following the correct flow to ...

javascriptfirebasenext.jsfirebase-authenticationemail-verification

Using sandboxed iframes in HTML for secure `src` loading on Internet Explorer 11 and Microsoft Edge

Is there a way in IE11/Edge with HTML5 to populate a sandboxed iframe (<iframe sandbox></iframe>) with HTML without using a src url? I am searching for a solution similar to srcdoc that is compatible with all other modern browsers. Attempting ...

htmliframeinternet-explorer-11sandboxmicrosoft-edge

Unable to access or click on Wordpress links or site titles

On my website, www.website.com, I have a main Wordpress installation and a test site at www.website.com/test. The main site functions correctly, but the links on the test site are behaving strangely. I have set the post title as the permalink structure (w ...

phphtmlwordpress.htaccess

Is there a method to implement a pop-in animated contact form without the use of Javascript or query selectors?

Although I was successful in creating a contact form with this functionality using Javascript, I encountered some difficulties when attempting to achieve the same result without it. My goal is for the form to slide in from the right when the "open" icon is ...

javascripthtmlcssformsanimation

Please select the option to choose all values

Currently, I am working on implementing a select option feature on my webpage. I have integrated PHP into it to ensure that the selected option remains unchanged after submission. My goal is to include a value of "any" so that when the user chooses "ANY," ...

javascriptphphtml

Express.js | Utilizing express.Router and handling route parameter inputs

I'm currently facing an issue with a small program I'm developing to practice Express.js. The problem lies in a separate router that is supposed to send a specific response based on the route. For example, when navigating to "/santiago", it shou ...

javascriptexpress

Attempting to generate a pre-existing platform view in Flutter Google Maps with the view ID of 0

When using Google Maps in Flutter for the first time, it loads perfectly. However, upon hot restart, it throws a platform exception. google_maps_flutter: ^0.5.21+15 Github [google_maps_flutter] Attempting to create an already created platform view #45695 ...

androidgoogle-mapsfluttergoogle-maps-flutter

Searching for a MongoDB document using its unique identifier

Currently, I am working with Node.js and MongoDB where my database is hosted on MongoHQ (now compose.io). I have come to understand that document IDs are converted to hex strings, but I am struggling to retrieve a document using its ID. In my dataset, the ...

javascriptnode.jsmongodbmongohqdatabase

AJAX not showing validation error message

For the past two days, I've been grappling with an issue and can't seem to pinpoint where it's coming from. After leaving the textbox, the Ajax call functions correctly and returns results as either true or false, triggering the success fun ...

javascriptajaxdevexpress

Arrange records in ascending order by phone number when multiple are returned on the same date

Currently, I am working on an Angular application that is designed to keep track of tuxedo rentals. The main feature of the app is a table that displays information from an array stored in the controller. The initial task I completed was listing the items ...

javascriptangularjssorting