New issue
Advanced search Search tips

Issue 599606 link

Starred by 1 user

Issue metadata

Status: WontFix
Owner: ----
Closed: Apr 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 2
Type: Bug



Sign in to add a comment

Text with opacity looks lighter than text with same color

Reported by sergen....@gmail.com, Mar 31 2016

Issue description

UserAgent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2695.1 Safari/537.36

Example URL:
https://jsfiddle.net/SerGen/ju5usmL4/

Steps to reproduce the problem:
1. Create two elements
2. Add color: #666 for first.
3. Add opacity: .6 for second.

What is the expected behavior?
Text must look same as in Photoshop and FF.

What went wrong?
Text with opacity looks lighter. You can check it with color picker, they have same color, but something like font-smoothing makes text lighter.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? No 

Does this work in other browsers? Yes 

Chrome version: 51.0.2695.1  Channel: canary
OS Version: 6.3
Flash Version: Shockwave Flash 21.0 r0

Can reproduce in Chrome/49.0.2623.91.
 
Components: -Blink Blink>Paint
Labels: M-51 OS-Linux OS-Mac
Status: Untriaged (was: Unconfirmed)
Able to reproduce the issue on Windows 7, Mac 10.10.5, Ubuntu 14.04 using 51.0.2695.1 with below steps:

1.Opened URL: https://jsfiddle.net/SerGen/ju5usmL4/
2.Observed that text with opacity looks lighter compared to Firefox.

This is non regression issue seen from M-30(30.0.1549.0).Hence, marking it as untriaged.

Could anyone from dev team look into this issue please.
Cc: bunge...@chromium.org fmalita@chromium.org
Components: Internals>Skia
Status: Available (was: Untriaged)
The difference is very slight on Linux and Win, to my eye. More importantly, color #333 and opacity 0.75 look very similar too, so we're not obviously going wrong. I think this is WontFix, but those who know more about font rendering might have an opinion.
Chrome is almost right here, Photoshop and Firefox are just wrong. Photoshop may give the right results if you use the appropriate settings. See http://www.kiransprojects.com/blog/2014/photoshop-blending-is-broken/ for explanation and the settings for CS6 and later to get correct blending (Edit->Color Settings->More Options->Blend RGB Colors Using Gamma 1.00).

To make things more explicit the two colors are
#666  = rgba( 40%,  40%,  40%, 1.0)
0.6   = rgba(  0%,   0%,   0%, 0.6)

Which are to be drawn on top of
white = rgba(100%, 100%, 100%, 1.0)

Consider a solid square drawn with the first color. No matter the color space, the result will be the first color where the solid square is drawn since it is opaque. So we end up with rgba(40%, 40%, 40%, 1.0).

When the blend is done in linear color space with the second color, the result will be 60% black and 40% white. So we end up with rgba(40%, 40%, 40%, 1.0).

When the blend is done is sRGB color space with the second color, the result will be
srgb_from_linear(60% linear_from_srgb(black) and 40% linear_from_srgb(white)). Since linear_from_srgb(black) and linear_from_srgb(white) map to black and white this simplifies to srgb_from_linear(60% black and 40% white) which is srgb_from_linear(40% white) which turns out to be ~67%. So we end up with rgba(67%, 67%, 67%, 1.0), which is about #AAA.

Since CSS colors are specified to be sRGB, the 0.6 opacity color should actually look like #AAA, not like #666. On this basis, Chromium is still too heavy, but it's in about the right ballpark for total illumination if you stand back a little ways from the display. I believe we explicitly do not want to look like Firefox here.
Status: WontFix (was: Available)
Per bungeman's excellent explanation, this is WontFix, working as intended.

Sign in to add a comment