Webkit browsers showing blue text as slightly purple

Question

I can't find any info on this issue in Google, because every result is about the default purple a:visited color. That is NOT the issue here. The issue is with Chrome's default anti-aliasing, on some systems blue text shows up as blueish-purple. If I change the anti-aliasing to -webkit-font-smoothing: antialiased it keeps the correct color, but then the fonts are radically different between Chrome and Firefox. The blue color I'm using is the client's color, so it cannot change to purple like this. I'm hoping somebody has a fix for this.

Here are screenshots from tests I've done:

EDIT: Just to clarify, this has nothing to do with the default a:visited link color. My blue color is being inherited, but Chrome's anti-aliasing is causing the text to appear purple. Here's an example: http://jsfiddle.net/yvjjxfqt/

@LaurentiuL. check the edit. The color is the only CSS style. Like I mentioned before, this is not a color inheritance issue. From what I can see it's an anti-aliasing issue. The jsfiddle I posted has the same purple text problem. — Gavin, Aug 18 '15 at 14:32
Stupid review audit ate my comment... anyway, on Windows, this looks like an interaction with ClearType, as the horizontal lines in the example have the correct colour on both browsers, while the vertical lines are strongly sub-pixel-anti-aliased on Chrome but only slightly so on Firefox. (Also if you turn ClearType off then Firefox also disables antialiasing whereas Chrome does not.) — Neil, Sep 10 '15 at 11:14
@Neil this also happens in OSX though, but only on non-retina screens. Maybe Chrome uses their own type renderer? — Gavin, Sep 10 '15 at 11:26

vals · Accepted Answer · 2015-08-19T05:12:57.673

15

It gets solved (at least in my system) setting a transform in the element

a {
    color: #1967b1;
    display: block;
}

a:nth-child(2) {
    transform: rotateX(0deg);
}

<a href="#">This is a link</a>
<a href="#">This is a link</a>

I guess that the rendering in the gpu doesn't have this problem

This is how it looks in my system

Another way to solve it seems to be using opacity

a {
    color: #1967b1;
    opacity: 0.99;
}

<a href="#">This is a link</a>

edited Aug 19 '15 at 05:12

answered Aug 18 '15 at 15:58

vals

61,425
11
89
138

Any reason why you went with the rotate rather than transform3d (the more common trick for forcing hardware acceleration)? Just curious. – Dre Aug 18 '15 at 16:13
1

Take note that this only works if the element has a block type display setting. This solution does not work when the element is set to `display:inline;`. – IMI Aug 18 '15 at 17:04
@vals Thanks! That did it! – Gavin Aug 18 '15 at 17:21
Happy that it helped ! – vals Aug 18 '15 at 20:10
@IMI You are right. I have added another solution that doesn't have this problem – vals Aug 18 '15 at 20:11
1

@vals - Nice opacity solution. Since this seems to be a webkit issue, you can probably just use the prefixed `-webkit-opacity` property. – IMI Aug 19 '15 at 01:58

Webkit browsers showing blue text as slightly purple

1 Answers1