Troubleshooting problem with altering color of the "j" character in webkit

It's really strange and kind of frustrating. I wanted to change the color of a link, which should be simple enough, right? Wrong. Chrome won't budge when it comes to changing just 2 pixels of color on the "j" character when I hover over it. Safari has the same issue, but Firefox is rendering it perfectly.

I've tried switching fonts, but the problem remains. Surprisingly, only Arial didn't have this issue out of all the fonts I tested.

Not sure if it matters, but the text is wrapped in ol>li>a

When I attempted to take a screenshot with forced :hover in chrome developer tools, it worked flawlessly. So, I had to use my phone to snap the picture and manually hover with my mouse.

EDIT: Included CodePen Demo EDIT2: It seems like being wrapped in ol>li doesn't affect the issue at all

htmlcssgoogle-chromesafariwebkit

Answer №1

The issue is a result of subpixel rendering. To resolve this, try adding the CSS rule opacity: 0.9999; to the li a element.

UPDATE:

Alternatively, you can use 

text-rendering: optimizeLegibility;
, which avoids pixel cutoffs seen in the previous solution.

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 retaining the value of a variable when the page is reloaded

I need to store the value of the variable loggedIn, as it determines the behavior of a function in appComponent.html. Can you explain how I can achieve this? Template of app component: <li class="nav-item"> <a class ...

javascripthtmlangulartypescriptangular6

What are the best strategies to prevent text from appearing jumpy while fading in word by word?

I'm struggling to create a smooth fade-in effect word by word without causing the first word to suddenly jump to the left when the second word appears. To better explain my issue, I've provided a jsfiddle link: http://jsfiddle.net/6czap/504/ If ...

jquerycss

Tips for stopping links in iOS web applications from launching in a new Safari tab

I am in the process of developing an HTML application specifically for iPads. To enhance user experience, I have added the web app to the homescreen using the "favorite" option. However, I encountered an issue where every internal URL opens in a new Safari ...

javascriptjqueryhtmliossafari

Controlling various divs with unique identifiers using Angular

Imagine having a vast number of HTML elements with unique IDs that require their styles to be changed repeatedly in a controller for spectrum visualization. What is the most efficient way to achieve this in Angular, without resorting to duplicative HTML co ...

javascripthtmlcssangularjs

The process of making a pop-up modal instead of just relying on alerts

Attempting to change from using an alert to a pop-up with a simple if statement, but encountering some issues. Here is the current code: if(values == ''){ $('body').css('cursor','auto'); alert("Blah Blah..." ...

javascriptjqueryhtmlcss

Is it possible to nest an array within a value of a Sass object?

I'm currently attempting to incorporate an array within the value of an object. $background-things: ( 'a': ['100vh', 'transparent', 'column'], 'higher': ['70vh', '#000', &ap ...

csssass

Can a small white pop-up be triggered by clicking a button?

While exploring the website , I noticed that clicking on Availability Zones opens a small window with text on the right side of the page. Is it possible to achieve a similar feature on a leaflet map without using JavaScript? This functionality would be tri ...

javascripthtmlcssleafletwindow

What could be causing my page to suddenly disappear?

After saving my changes in the IDE and refreshing the browser to test the prompt() function in my index.js file, the entire page goes blank, showing only a white screen. I double-checked the syntax of my function and it seems correct. Everything else on th ...

javascripthtmlcssreactjs

A guide on how to insert content into a text area using a drop-down menu choice

I'm a total beginner at this. Is it possible to use JavaScript to automatically fill in a text area on an HTML form based on what is selected in a drop-down menu? If so, can someone please explain how to achieve this? ...

javascripthtml

Tips for presenting PHP code in a Bootstrap 3 col-sm-4 layout for each set of 3 database entries in a single row

My PHP program retrieves 3 customer records from the database. I want to display the results in a Bootstrap grid view with 3 columns of col-sm-4 in one row. Currently, it displays all the results in a single vertical line. Another requirement is to show ...

phphtml

Grab cell information from a dynamic table using Ruby and Selenium

I am attempting to retrieve a property of cells within a table. <table id="m-103" class="m-row" cellspacing="0"> <a name="2"></a> <table id="m-108" class="m-row " cellspacing="0"> <a name="3"></a> <table id="m-191" ...

cssrubyxpathseleniumautomation

Steps for implementing a custom markup trigger with prettyPhoto:

Recently, I encountered an issue with my table view: https://i.sstatic.net/Fji2F.png Upon clicking the td, it should open the PrettyPhoto Lightbox In the default PrettyPhoto setup, the html trigger looks like this: <a href="images/fullscreen/2.jpg" ...

javascriptjqueryhtmlcssprettyphoto

What is the best way to dynamically change the JSON-LD Script for the Schema?

Below is the script in question. Please read through it carefully. <script type="application/ld+json"> { "@context": "http://schema.org/", "@type": "Product", "name": "Bat, &q ...

javascriptphphtmljqueryajax

Retrieve the value of a checkbox from a PGP email form

Although I am not a programmer, I managed to get this code to work, which sends an email with all the values. However, I am facing an issue where the checkbox values appear blank in the email even when they are checked. Any assistance would be greatly appr ...

phphtmlformsemailcheckbox

Impact on adjacent div

Within my code, I have two sibling divs that contain additional nested divs as shown below: <div class="btn_lists"> <div class="btn green_btn"> <img src="<?= asset_url() ?>images/escolar_07__1.png" /> </div> & ...

htmlcss

Why Won't My PHP Form Submit on a Bootstrap Website?

I'm struggling with validation and need some assistance. I have a Bootstrap form embedded within an HTML page and a PHP script to handle the submission. However, whenever someone clicks on Submit, the page redirects to display my PHP code instead of a ...

javascriptphpjqueryhtml

Arrange symbols in fontawesome into a pile

Is there a way to stack grid icons in the font awesome framework to create a 3x2 grid icon? Demonstration Jsfiddle <a href="./"><i class="fa fa-square"></i> 1x1</a> <a href="./" ><i class="fa fa-square"></i>< ...

jquerycssfont-awesome

What is the correct way to utilize Bootstrap grid offsets?

Recently, I have been working on a webpage that features a unique layout using Bootstrap grid rows. Each row consists of a paragraph of text and an image. The layout is designed to have the text occupy specific columns on large screens, with the image shif ...

htmlcssbootstrap-5

Steps for Deactivating Past Dates on JQuery Datepicker1. Open your

I've been working on a custom JQuery Calendar for selecting appointments, with the requirement to disable dates prior to the current date and highlight available dates in an orange color (#f48024). Unfortunately, my attempt using minDate hasn't b ...

javascripthtmljquerydatepickercalendar

Update the image links to automatically refresh every half a second based on the values inputted in the text bars

Is there a better and simpler way to define AAAAAAAAAA, BBBBBBBBBB, and CCCCCCCCCC using the links provided in the text bars named chart1, chart2, and chart3? This learning project is being done through Notepad++ for personal use only, with no need to sa ...

javascripthtmlimagesrc