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:
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.
