Link color not being displayed in Chrome / Safari browsers

Very often the work process with cross browsing compatibility could be stick on a curious browsers features. And we spending much time trying to resolve an easy issue.
So we want to describe one of the browser feature that we found on client’s website.

That’s was a simple link to the internal page with its hover state. A lot of links were on a single page and all of them worked great on deskop.
But in Chrome and Safari on mobile devices, these link elements are being displayed as usual text with no any color, even the color that has been assigned through the main styles of the theme.

Again, this is Chrome/Safari only. It took us a while to find a good solution.

How to solve it?

Chromium (Chrome/Safari) and its webkit often seem to have weird disappearing bugs. So the fix of that issue – is to add additional -webkit-text-fill-color property. The -webkit-text-fill-color CSS property specifies the fill color of characters of text. If this property is not set, the value of the color property is used.

HTML Code:

Copy to Clipboard

 
So now Chrome/Safari on mobile device will show the link with its proper color. An additional it could be required to add the hover/visited state using the same property.

That’s it.

Back to Articles List

Let’s Work Together

TELL US MORE ABOUT YOUR PROJECT

Every day, we strive to assist a websites of our clients in augmenting their brand’s online visibility, improving the work any parts of web resources, increasing reach & engagement with a target audience and eventually drive sales.

LET’S CONNECT