0

I've noticed that when updating the opacity of text that the color changes. This only happens in Chrome (current version 58, June 1, 2017).

Attached is an image comparing the same text with the same color but differences in opacity. The first line is assigned opacity: 1.0; and the second line is assigned opacity: 0.99;. Additionally, it appears that the weight has also slightly increased, but I suspect that has more to do with how the colors are used for anti-aliasing.

enter image description here

Is this a bug in the Chrome Browser?

The font used is: Muli Semibold (weight 600) with an assigned color of #45B4E4.

[EDIT]

Here are versions in yellow (#E2E445), red (#E44545) and green (#45E445). As you can see, it's not only blue that makes this problem obvious.

enter image description here

Chunky Chunk
  • 16,553
  • 15
  • 84
  • 162
  • Possible duplicate of [Webkit Opacity Transition Issues with Text](https://stackoverflow.com/questions/11402698/webkit-opacity-transition-issues-with-text) – James Jun 01 '17 at 20:19
  • This behaviour has been present in chrome for quite a while.. – Rachel Gallen Jun 01 '17 at 20:27
  • I evaluated the pixel width of the characters and found them to be identical (eg: the 1 in 1.0 is 5 pixels across). I determined the beginning of each character was where the pixel value dipped below #ffffff. Humans have really good vision in the blue part of the spectrum. $5 says you wouldn't see the issue if it was yellow. :) –  Jun 01 '17 at 21:22
  • We can see the issue in yellow and all other colors. – Chunky Chunk Jun 01 '17 at 23:32
  • @James setting `-webkit-font-smoothing` doesn't solve the problem, unfortunately. – Chunky Chunk Jun 01 '17 at 23:39
  • Yep I agree it's messed up, [here's a fiddle](https://jsfiddle.net/cg32z46g/). It looks like it's ok with a dark background. – James Jun 02 '17 at 02:39
  • I can still see the difference clearly with a dark background. I'm surprised that `-webkit-font-smoothing` doesn't do anything since it's clearly an issue with the visual edges of the text. In darker colors (`opacity: 1;`)the antialiasing is grayscale while in brighter colors (`opacity: 0.99;`) the font edges are the same color as the text, which not only causes it to appear brighter but also lends to it's heavier font weight. – Chunky Chunk Jun 02 '17 at 07:17

0 Answers0