Is there a background effect when tapped?

Have you noticed the background effect that appears when tapping on certain <a> elements on a webpage? Some have a visual feedback, while others do not. This phenomenon occurs on Chrome for Android as a quick flash of blueish color for a brief moment.

It seems similar to the :active state, but not quite the same. It does not appear to be defined in the inspector and only happens when tapped (not clicked on desktop).

Is there a way to apply this effect to every element? The inconsistency can be quite bothersome.

cssmobileanchor

Answer №1

Based on my understanding, without much information, it seems like you're interested in replicating the "ripple" effect. This effect creates a wave of color changes emanating from the point where the user clicks.

If you'd like to learn more about how this effect is achieved using plain CSS, I recommend checking out this tutorial:

Answer №2

After some investigation, I came to the realization that the default styling on mobile browsers affects how <a> elements are displayed.

The problem at hand was that the dimensions of the visible box did not align with those of the actual <a> element, but rather with its inner (possibly event target?) element.

In simpler terms, in a scenario like 

<a><i class="fa fa-icon"></i></a>
, upon tapping, instead of highlighting the <a> tag, it highlighted the <i> tag within it.

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

How can I ensure that my Bootstrap 4 column adjusts to its content appropriately?

In the following container, there are two rows: the first row serves as the header, and the second row contains a left navigation bar and main content on the right side. The left nav bar is designed to shrink to the width of the content. By pressing a tog ...

htmlcsstwitter-bootstrapvue.jsbootstrap-4

What is the best way to ensure a division's height matches that of the window using CSS?

Is it possible to create a division that covers the total width and height of the screen using just CSS without relying on JavaScript or jQuery? <div id="all"></div> I have tried setting the width and height of the element to 100%, but I am s ...

htmlcssheight

Disregarding 'zIndex' directive within JavaScript function, an image stands apart

There is an issue with the z-index values of rows of images on my webpage. Normally, the z-index values increase as you scroll further down the page. However, I want certain items to have a lower z-index than the rest (except on hover). These items are i ...

javascriptcss

Webpack2 now transforms sass/scss files into JavaScript rather than CSS during compilation

I've created a webpack script to compile all .scss files into one css file. I decided to use webpack instead of gulp or grunt for simplicity, as it can be configured in a single file. However, I am encountering an issue where scss files are being com ...

javascriptcsswebpacksass

Ways to pinpoint a particular division and switch its class on and off?

Consider this scenario, where a menu is presented: function toggleHiddenContent(tabClass) { let t = document.querySelectorAll(tabClass); for(var i = 0; i<t.length; i++) { t[i].classList.toggle="visible-class"; } } .hidden-conten ...

javascriptjqueryhtmlcss

Unicef's animated web content

Looking to learn more about gate animation and zoom page transition on the Unicef website? I want to incorporate these cool animations into my own project. Can someone provide me with a "keyword" or point me in the right direction to find information on ...

javascriptcsshtmlweb-animations

"Effortlessly Enhance Your HTML with Auto-Complete CSS Classes in Sublime Text

Is there a way to enable CSS auto-complete for classes in Sublime Text 2? For instance, I have linked a CSS file in my HTML document link rel="stylesheet" href="css/style.css" In the CSS file, I have defined the following class: .container-primary { ...

htmlcsssublimetext2code-hinting

Issue in Laravel5.8: Unable to collapse the HTML code retrieved from the database

How can I display HTML code from the database without affecting the functionality of the Collapse feature? The Collapse feature works fine when I don't decode the HTML, but it stops working when I decode it. Why is this happening? <!-- START TAB ...

htmlcssbootstrap-4laravel-5.8

Adjust the dimensions of the container to match the size of the

I have a div with the class of "container" and I need to adjust the height of this container based on the dimensions of the image it contains. Here is the HTML structure: <figure class="container"> <a class = "123"> <img class="it ...

htmlcss

Is it possible to simultaneously run watchify and node-sass watch together?

Currently, I am utilizing npm scripts in conjunction with watchify and node-sass while incorporating the -w parameter. I am curious if it is feasible to execute both of these 'watch' commands simultaneously. Would this setup ensure that only sty ...

javascriptcssnpm

How to align an element to the bottom using CSS without relying on the parent's height

Is there a way to align an element to the bottom of its container without knowing the exact height? I'm trying to position the "links" div next to the logo text at its bottom, but since the logo size can vary and may even be an image, setting a fixed ...

css

Evolving fashion trends

I'm looking to dynamically change the style of my HTML element based on screen size, similar to this example: <p [ngStyle]="{'color': isMobile() ? 'red' : 'blue'}">Lorem Ipsum</p> The code above triggers a m ...

htmlcssangulartypescript

Switching the order of elements in a column using Flexbox

Here is the grid layout on PC: https://i.sstatic.net/4HRvd.png And here is the grid layout on mobile devices: https://i.sstatic.net/URBjb.png I am looking to rearrange the order and layout of the grid. I have tried using flexbox, but I need to group B an ...

htmlcssflexbox

What are the pros and cons of incorporating ID selectors in CSS?

This article discusses the drawbacks of utilizing ID selectors in CSS. Can you provide more information on the pros and cons of using ID selectors in CSS? In what scenarios should ID selectors be used over class selectors, and vice versa? Thank you. ...

csscss-selectors

Using CSS to apply a gradient over an img element

Looking to add a gradient overlay to an <img> tag with the src attribute set to angular-item. Here's an example: <img src={{value.angitem.image}}> I attempted to create a CSS class: .pickgradient { background: -webkit-gradient(linear ...

htmlangularjscssgradient

determine the vertical dimension of the horizontal scrollbar

I ran into an issue where I needed to determine the height of a horizontal scrollbar. This question and answer recommended using the clientHeight property to calculate the difference. Unfortunately, this method no longer works as shown here: https://jsfid ...

javascripthtmlcss

Tips for aligning a div within a flexbox to the bottom position

I'm having trouble aligning the div at the bottom of the flex box. I attempted to use align-content: flex-end; but it didn't work. Is there a way to keep the <.div class="parameters"> at the bottom of the row? Especially when the ...

htmlcss

What sets apart elevation from z-index in material-ui?

As I delved into the material-ui documentation, I came across an interesting snippet: Various components in Material-UI make use of z-index, a crucial CSS property that aids in organizing content along a third axis. Material-UI employs a predefined z-in ...

reactjscssmaterial-uiz-index

Tips for effectively placing a page scope block using BEM

Here is the current structure of my header. The page component is assumed to be the root. Currently, the geometry of the social-links block is being controlled by the header__social-links mix (positioned absolutely relative to the header). How can I prop ...

htmlcssbem

Creating CSS with rounded borders, precise sizing, cleverly placed white space, and smooth anti-

After experimenting with a simple css scenario for creating a card style layout, I noticed that it looks fine on my 22-inch monitor but appears distorted on my Samsung TV with a resolution of 1920x1080. There seems to be a white gap in the border due to an ...

cssborder-layout