Bug 275565 – CSS opacity percentage being rendered incorrectly vs FF/Chrome

• Component: CSS
• Status: RESOLVED DUPLICATE

Created attachment 471693 [details]
HTML with a reproducible case

Text colors with opacity are being rendered differently on Safari vs Chrome/FF when the text has:

1) a custom font
2) a weight above 500 that is not declared in the font-face
3) a color that contains an opacity (e.g. rgba(), hsla(), color-mix, etc)

See attachment for a minimal reproducible case. The "gray" text is gray on Chrome and FF, but Safari renders it much closer to black.

Black with an opacity 40% appears as close to black. The drop-off as the opacity drops is not linear, it's more like exponential.

Created attachment 471694 [details]
Scale to see differing opacity of rgba vs opactiy attribute

I've added a table so you can see how the opacity scale from 10 to 100 works correctly on Chrome/FF (same between rgba() vs opacity), but results in different output on Safari.

[Alexey Proskuryakov]

This seems more like a general font rendering difference to me, given that unsettled text looks different between the browsers.

The opacity issue may also be real, just seems harder to see.

I agree that the different rendered weights make it a little tougher to see the cause here. However, my second attachment shows the discrepancy clearly when rendered on WebKit. Also, if you look at the hex values of the 10% and 20% in `rgba` vs `opacity` approaches, you can see that the problem is solely with the opacity:

%     rgba       opacity
10%   A6 (166)   E5 (229)  [255*.9 = 229.5]
20%   68 (104)   CC (204)  [255*.8 = 204]

[Vitor Roriz]

Looks similar to https://bugs.webkit.org/show_bug.cgi?id=272579

Good spot! Yes, I think this is a duplicate.

I’ll add my diagnosis to the other bug and close this one.

*** This bug has been marked as a duplicate of bug 272579 ***