Color-changing background effect when tapping inside a contenteditable element

Is there a way to prevent the background of a contenteditable div from flickering gray when touched inside the div? This issue can be observed on iOS Safari or UIWebview object.

Check out this HTML demo for an example:
You can also view an image demonstrating the problem here: https://docs.google.com/file/d/0B-On7OzzI7SZZmtLMGEzZHNfNkU/edit?usp=sharing

Answer №1

Include the following CSS in your div that has the attribute "contenteditable=true"

div {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

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

Blurriness issue with image display on iPad Mini

In my app, I have a code block that captures a screenshot of the current screen on an iPad mini with dimensions 768 x 1024: UIImage *img; UIGraphicsBeginImageContext(self.view.bounds.size); [self.view.layer renderInContext:UIGraphicsGetCurrentContext()]; ...

Looking to create a helpful assistant for navigating my configurator tool?

I have implemented a configurator on my website that allows visitors to drag and drop elements to a specific area. Now, I am looking to add a user-friendly "helper" feature to guide visitors through the process. I came across this example and thought it wo ...

How to reduce the default width of Bootstrap carousel components

Click here for the 1st image. To view the 2nd image, click here. This represents the carousel code used on this particular website: <div class="row testing"> <div id="carouselExampleMen" class="carousel carousel-dark s ...

What is the best way to transfer an array made in JavaScript to a different JSP and subsequently utilize that array in a Java function within that JSP?

I have a script that needs to pass an array called "playernames" to a Java function on another .jsp. I'm looking for guidance on how to send this array to the other page and then retrieve it for my Java function. <script> function getPlayerName ...

What is the recommended way to include an image in a v-for loop in Vue.js?

I have attempted various online solutions, but I am still unable to display images on the screen. Could it be a simple mistake? The file names and folders are accurate. When providing the path, I aim to retrieve the image associated with the sub-club name ...

"Placing an image at the bottom within a DIV container in HTML

My goal is to neatly align a group of images at the bottom of a fixed-height div. The images all have the same height and width, making the alignment easier. Here is the current structure of my code: <div id="randomContainer"> <div id="image ...

Tips for presenting HTML source code with appropriate tag coloring, style, and indentation similar to that found in editors

I need to display the source code of an HTML file that is rendered in an iframe. The source code should be shown with proper tag colors and indentations similar to editors like Sublime Text. https://i.stack.imgur.com/IbHr0.png I managed to extract the sour ...

What purpose does the additional symbol "$()" serve in the selector "$($())"?

Currently, I am looking to incorporate a jQuery scrollspy feature into one of my ongoing projects. Upon coming across this jsfiddle (https://jsfiddle.net/mekwall/up4nu/), I successfully integrated it into my project. However, I have hit a roadblock while ...

Typescript Angular2 filtering tutorial

In Angular 2 using TypeScript, the goal is to search for matching values from an array within an object array. The intention is to filter out any objects where the 'extraService' property contains any of the values from the 'array_values&apo ...

When using classList.replace, it should swap out every instance of the class xxx1yyy with xx

I attempted to swap a class and came across this helpful example here: javascript: replace classList that is inside a conditional Unfortunately, my attempt at modification (shown below) did not work. The use of classList.replace should change all instanc ...

CSS slideshow animation is not functioning properly

Hey there, I'm new around here and I've got a question for you all. Please bear with me if I make any mistakes. So, I'm attempting to create a simple CSS slide image. In my animation code, I want the picture to fade from the left every time ...

Enhance your theme property in Styled Components by incorporating numerous style properties

Currently, I am delving into the world of styled components for a fresh project and exploring the theming capabilities it offers. I am finding it challenging to determine the best practice for adding multiple style properties to a single object, essentiall ...

What is the best way to horizontally center a child div within its parent container while keeping it fixed at the top?

I am struggling to center a child div horizontally within its parent div while also fixing it to the top of the parent. I have tried various approaches in CSS, but so far I haven't been successful :-( I can either center it or fix it to the top, but w ...

What is the best way to create space between floated elements and a cleared element?

I have a webpage with various floated boxes and a footer positioned at the bottom. The issue arises when trying to create space between the boxes and the footer without using margins. #main { max-width: 700px; margin: 0 auto; } .box { width: 46.6 ...

Tips for retrieving values from numerous checkboxes sharing the same class using jQuery

Currently, I am struggling with getting the values of all checkboxes that are checked using jquery. My goal is to store these values in an array, but I am encountering difficulties. Can anyone provide me with guidance on how to achieve this? Below is what ...

ngIf works by organizing elements based on the initial letter they start with

I have a list of names that I need to sort by their first letter. To achieve this, I created buttons representing each letter of the alphabet. When a letter is clicked, only the names starting with that letter should be displayed using ngIf. <button *n ...

Looping through elements using jQuery in JavaScript

Is there a strange phenomenon happening with my variable in the HTML? I set it to "0", but it displays as "10" on the page. Despite using jQuery and JavaScript, the number stays static at "10" even after refreshing the page. I'm attempting to make th ...

Incorporating HTML5 Video Using an AJAX Request

I am attempting to fetch a video using an ajax query, but it seems that the video player control buttons are missing. Here is the code I am using: $.ajax({ context: document.body, url: "/?get=json&act=video", type: "get", success: fu ...

I am having trouble with using document.getElementById().value to retrieve text input. Can anyone help me understand why it's not

It's puzzling to me why document.getelementbyid().value isn't working as expected. Upon inspecting the console, no input seems to be sent or printed out in the console. function callApi() { var keyword = document.getElementById('user_ ...

Transpiling Sccs/Sass code into CSS

Is there a way to create a compiler that can convert SCCS/SASS code into CSS without using a VSCode extension? I'm curious about what programming language and basic concepts are needed for this task. Any insights would be greatly appreciated. Thanks! ...