Transforming the iOS link background color as you scroll

My website features a collection of products displayed within clickable a links styled with display:block for full clickability. However, I've encountered an issue where the background color of the a link changes to an active state color when scrolling on my iPhone. This constant change in background colors can be quite irritating while browsing through the product list. Why does this happen and what is the best way to prevent it from occurring, while still allowing the background color to change upon clicking on iOS? Am I the only one facing this problem?

If you need a jsfiddle example, please let me know. Thank you.

ioscss

Answer №1

In my application, I took the approach of explicitly listing all the states to eliminate any confusion. Here is an example of how my CSS code looks:

a:link {
    text-decoration: none;
    color: black;
    -webkit-tap-highlight-color: #ffcc99;
}

a:visited {
    text-decoration: none;
    color: black;
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
}

a:hover   { //it's technically optional to specify hover
    color:black;
}

a:active  {
    color:grey;
}

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

Equivalent of Cocos2D's replaceScene function in UIKit

I've been using Cocos2D for a few months now and typically utilize the following code snippet: MyCCScene *sceneToRun = [MyCCScene node]; [[CCDirector sharedDirector] replaceScene:sceneToRun]; This loads the new scene, clears the previous scene from ...

iosuiviewcontrollerreplacecocos2d-iphonecontainment

By incorporating JavaScript, clicking on an image will trigger a shift in the position of a different element

Just starting out with JavaScript and experimenting with creating an event where clicking on an image triggers the movement of another hidden image. The hidden image is positioned off-screen to the left, while there is a table of images in the center of th ...

javascripthtmlcssimage

Achieve equal height for two v-flex sections placed side by side in Vuetify framework

desired appearance: https://i.sstatic.net/aPrrP.png current appearance: https://i.sstatic.net/JNH2W.png In an attempt to ensure two tables have a consistent and responsive height using Vuetify features, I have implemented the following code: <templa ...

htmlcssvue.jsfrontendvuetify.js

Tips on displaying JSON data from a URL in a collection view

After successfully retrieving data from a URL with authorized header, I have converted it to JSON format. Within the JSON file, I only have PDF files. However, rather than displaying the actual PDF content, I want to display the file names (e.g., document ...

iosobjective-cjson

The container is unable to contain the overflowing Slick carousel

The carousel in Slick is overflowing the container. Expected Result - First Image / Current State, Second Image Parent Container HTML (layout) <main> <div class="layout__main-container p-4"> <app-discover-animals clas ...

htmlcssangularjssliderslick.js

How can I conceal child <div> elements when the parent div is resized?

Struggling to implement a zoom in/out feature on my web app using the jqueryUI slider. Having trouble handling cases where the parent div shrinks too much, causing issues with the child containers. <div class="puck originator inline-block" style="w ...

javascriptjqueryhtmlcssjquery-ui

Arrangement of items in a grid with various sizes

I have encountered a challenge that I cannot seem to overcome. In my grid system, there are 18 identical items/boxes. I am looking to remove 4 of those items/boxes and combine them into one large item/box. Refer to the wireframe below for guidance on how ...

htmlcss

image background not appearing in HTML, CSS, and JavaScript game

When working on a simple HTML, CSS, and JavaScript game, I decided to make a change in the CSS code. Instead of setting the background color to green as before, I opted to use an image with the following line: background-image: url(flappybird.png); I also ...

javascripthtmlcssbackground-image

Unexpectedly, CSS is failing to override React-Bootstrap and Bootstrap as intended

Currently, I am tackling a project that involves utilizing react-bootstrap along with my own custom CSS for styling. Both are imported in my index.js file as shown below: import React from 'react'; import ReactDOM from 'react-dom'; impo ...

cssreactjsreact-bootstrap

Is CorePlot compatibility available for arm64 architecture?

When using Core-plot 1.4, I have discovered that I can integrate the pre-built Binaries/iOS/libCorePlot-CocoaTouch.a library into my iOS app successfully. However, in order to do so, I must remove "arm64" as a valid architecture in the BuildSettings/ValidA ...

ioscore-plotxcode5.1

What can be done to stop Bootstrap columns from shifting positions or stacking on top of each other unexpectedly?

I'm currently working on a testimonial section for my project. The challenge I'm facing is that the content within the 4 divs is not evenly distributed. As a result, when I try to adjust the width of the screen and expect them to align in a 2-2 f ...

htmlcsstwitter-bootstrap

Using HTML5 and CSS to embed a video tag within a div container

I am currently using the Bootstrap modal plugin and I would like to incorporate a background animated mp4 video. How can I achieve this within the modal dialog where the video will be displayed from top to bottom? Below is the HTML code I have: <div cl ...

csshtml

Is there a way to dynamically apply the "active" class to a Vue component when it is clicked?

Here is the structure of my Vue component: Vue.component('list-category', { template: "#lc", props: ['data', 'category', 'search'], data() { return { open: false, categoryId: this.category ...

javascriptcssvue.jsvuejs2vue-component

What is the best way to ensure my images are responsive to the varying device sizes when displayed on this website?

In my endeavor to design a 2-column layout using Bootstrap, I aim for each row to consist of two columns: One column will contain text, while the other will display images that complement the textual content. Below is the Bootstrap code snippet for the n ...

htmltwitter-bootstrapcssvuejs2

Guide on effectively incorporating CSS and JS files packaged as an NPM module using gulp

How can I efficiently incorporate CSS and JS files from an NPM package, installed via gulp, into my index.html file? I have used NPM to install the Materialize CSS framework by running: npm install --save-dev materialize-css Now, I need to include the CS ...

javascripthtmlcssnpmgulp

Images are not centered within the bootstrap row

As a beginner in coding, I've been facing a challenge trying to center my images on a bootstrap row. I attempted using the center-block div on each image, which did center them horizontally but stacked them vertically. I then tried applying center-blo ...

htmlcsstwitter-bootstrap

Navigating the Bootstrap layout resulted in encountering two scrollbars

My HTML code for a todo application is displaying two scrollbars, can anyone suggest the correct Bootstrap layout for my application? <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div ...

htmlcsstwitter-bootstrapbootstrap-4

What is the process for configuring the indicatorType in KingFisher v5.0.0 within an extension on UIImageView?

Previously, I successfully implemented the following code snippet (using version 4.10.1): extension UIImageView { func test() { self.kf.indicatorType = .activity } } However, after updating to version 5.0.0, I encountered the following e ...

iosswiftkingfisher

Displaying data from a JSON file in a Django template by utilizing Bootstrap tabs

Apologies for my lack of experience in programming.... I am currently exploring Bootstrap's tabs navigation to display JSON data from a database. The JSON data is converted into a 2d array and stored in the dictionary below: tables = {u'table1& ...

pythonhtmlcssdjangobootstrap-4

What methods can be used to dynamically pan the entire picture in a programmatic way?

I have a massive div measuring 11500x11500 pixels that contains 400 images, causing it to overflow the viewport. My goal is to programmatically pan across the entire div. I'm aiming to create an animation that pans the entire div from top to bottom, ...

javascripthtmlcsscss-transitionspanning