Transitioning the color of links in Firefox causes flickering when switching between the hover and visited state

I have been working on testing this code snippet in Firefox 49.0 on Linux Mint:

a{
 font-size:50px;
 color:gray;
 font-weight:1000;
 transition:color 1s;
}
a:hover{
 color:black;
}
a:visited{
 color:lightgray;
}
<a href="">VISITED LINK</a><br>
<a href="https://google.com/randomtext">LNK NOT VISITED</a>

You can also view the code on CodePen if you prefer. Essentially, I want the links to appear consistently as light gray when visited, gray when not visited, and black when hovering over a link that has not been visited. Additionally, I would like a smooth transition between these colors.

However, I have noticed that in Firefox, the :hover rule seems to be applied first to the visited links when hovered over, followed by the :visited rule, resulting in flickering behavior while transitioning between these states.

So far, I have been unable to find a solution to this issue.

Edit: Interestingly enough, Chrome displays the desired behavior without any issues.

cssfirefox

Answer №1

I have discovered a solution: To fix the issue, you must include a hover state for the visited links as well. Take a look at the code snippet below.

a {
text-decoration: none;
color: #000000;
transition: .3s color;
}

a:hover, a:visited:hover {
color: #9097a0;
}
<a href="https://stackoverflow.com/" target="_blank">Click here to see a live demonstration</a>

Answer №2

It appears that there is a glitch in Firefox causing the transitions to malfunction.

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

Tips for shifting a stuck div 200px upward once the bottom of the page is reached while scrolling:

I've set up a page layout with two columns, one fixed and the other scrollable. The left column is fixed (containing Google ads) and stays in place as I scroll down the page. The right column displays posts and scrolls along with the rest of the con ...

javascriptjqueryhtmlcssposition

Remove the blue outline in Fancybox when clicked

Does anyone know how to remove the default blue outline that appears after opening and closing an image or video in Fancybox 3? It disappears when clicked next to, but I would like to get rid of it completely. Any help is appreciated. https://i.stack.imgu ...

javascripthtmlcssfancybox

The addition of a cancel swipe feature to an HTML5 eBook is causing the text input field for note-taking to malfunction

I am currently working on the development of a process to create HTML5 based eBooks for both desktop and mobile use using Adobe InDesign and exporting them with a plugin called In5. This plugin allows for the incorporation of html, css, and javascript duri ...

javascripthtmljquerycssadobe-indesign

Memory Match: Picture Edition

In this memory game, letters are used. I had considered changing it to a picture-based game, but I faced difficulty in generating images and incorporating them into the array. <script> var memory_array = ['A', 'A', 'B&ap ...

javascripthtmlcss

Is there a way to change the fill color of an SVG circle using Thymeleaf?

I am struggling to change the background color of a circle in an SVG image on my HTML page using Thymeleaf. I attempted to use inline style tags, but it resulted in the circle's background color turning black. <svg id="svg" height="50" width=" ...

htmlcsssvgthymeleaf

Is it necessary to wait for CSS to fully load on a static site built with Next.js?

I am currently working on a Next.js static site. The JavaScript loads quickly, but there seems to be a delay in applying the styled-components CSS as seen in the screenshot. The CSS only kicks in after the page has fully loaded. Does anyone have any sugge ...

cssnext.jsstyled-components

Is there a way to instruct the code to select between two variables and align their values?

I have encountered a challenge while working on a unit test. The website I am testing is dynamic, causing the CSS Selector and xpath to frequently change. As a solution, I came up with the idea of using both CSS and xpath to retrieve the same text. Curren ...

c#cssseleniumxpath

Is it possible to have an icon change color in a TableRow column when hovering over any part of that particular row?

I am currently using material-ui version 4.9.5. To illustrate my issue, I have created a simplified example here. I have a Table that is populated with basic JSON data. Each row in the table consists of an icon element along with its corresponding color a ...

javascripthtmlcssreactjsmaterial-ui

Targeting the landscape mode on screens of both iPhone 4 and iPhone 5 sizes using CSS3 Media Queries

I'm facing a problem with CSS3 media queries while developing a mobile site. The code I've written works perfectly on the landscape mode of an iPhone 5, but it's not quite right on an iPhone 4 or earlier in landscape mode. /* Default stylin ...

htmlcssmedia-queries

Using Javascript code to draw particles at the cursor's position and then directing those particles towards the bottom of

I found an interesting JavaScript code snippet that creates a bubble particles effect around the cursor. You can download it from https://github.com/tholman/90s-cursor-effects. However, I encountered a problem when adding certain elements inside a specifi ...

javascripthtmlcssweb

Unusual CSS behavior discovered while implementing horizontal scrolling navbar with overflow-x

I've been working on a navbar that will scroll horizontally when it exceeds the width of its parent container. It features a bottom border with a different color for the active link. Using a negative margin to overlap them works well, but as soon as ...

htmlcss

Exploring ways to enhance Bootstrap Navigation by adding extra link options. Seeking a resolution using jQuery

Are you looking for a solution to handle site navigation with a larger number of links? When more links are added, they display in multiple lines which might not be the desired layout. You can view an example of this issue in the attached image: See here a ...

javascriptjqueryhtmlcsstwitter-bootstrap

Top approach for creating/previewing a website using PHP, CSS, and MYSQL

When creating a website that will eventually be hosted on a remote server, what is the most effective way to code and test? Here are some examples of what I mean: - Develop locally on your computer and access files from there. Should libraries and databa ...

phphtmlmysqlcssdevelopment-environment

Using Webflow code in ReactJS/NextJS: Best practices and implementation tips

After exporting my Webflow code to my NextJS app, I noticed that many of the HTML tags are being flagged as errors because they appear to be missing closing tags. Can anyone shed some light on why this is happening and suggest potential solutions? It&apos ...

htmlcssreactjsnext.jswebflow

What is the best way to duplicate a CSS shape across a horizontal axis?

I am working on decorating the bottom of my page with a repeated triangle design. The image provided only displays one triangle, but I would like to extend it across the entire horizontal div. Here is a screenshot of my progress so far: https://i.stack.im ...

htmlcssrepeatcss-shapes

What could be the reason for my user input not being captured and saved as variable data on the HTML webpage?

Here is the code I am working with: var g = document.getElementById("al").value; function start() { document.getElementById("test2").innerHTML = typeof(g) + parseFloat(g); } <p id="test2">Output will be displayed here:</p> <form> ...

javascripthtmlcss

Is there a way to stack multiple Divs on top of each other using Float instead of relying on absolute positioning?

I've decided to revamp my approach and transition from using absolute positions to utilizing floats for positioning elements the way I desire. Now the challenge lies in figuring out how to float multiple divs on top of each other, allowing users to s ...

htmlcss

What is preventing me from using Selenium/Javascript to control Firefox on Ubuntu 22.04, when I am able to do so with Python?

My python script effectively controls Firefox using Selenium: from selenium import webdriver from selenium.webdriver.common.by import By driver = webdriver.Firefox() driver.get("https://dev.to") driver.find_element(By.CLASS_NAME, "crayons ...

javascriptselenium-webdriverfirefoxgeckodriverubuntu-22.04

I must create text that is transparent against a colorful gradient background

Hey there! I'm seeking help in figuring out how the text on this site is designed. You can take a look at it here. Essentially, what I'm aiming for is to have the text color match the gradient of the background color from the previous div, while ...

javascripthtmlcss

Can <p> be utilized without creating empty space at the top or bottom?

Is there a way to use paragraph breaks without any space at the top or bottom when there's no text above or below it? body { font-family:arial; background:#222; } #wrapper { width:100%; margin-top:100px; } .post_container { ba ...

htmlcss