NEW 272579
Different font-weight leads to different color in text. different in Chrome/Safari. 
https://bugs.webkit.org/show_bug.cgi?id=272579
Summary Different font-weight leads to different color in text. different in Chrome/S...
sunus
Reported 2024-04-12 01:35:55 PDT
Created attachment 470885 [details] screenshots. different font-weight 400/600 shows different color in Chrome/Safari. see screenshots and test page. test page in attachment. also screenshots in https://static.dingtalk.com/media/lQDPJwsR1Xvgb9HNB3TNC6iwRD3JApJXlmEGBfof9GrOAA_2984_1908.jpg
Attachments
screenshots. (1.75 KB, text/html)
2024-04-12 01:35 PDT, sunus 		no flags
Details
test html (1.75 KB, text/html)
2024-04-12 01:46 PDT, sunus 		no flags
Details
screenshots in Safari/Chrome (425.96 KB, image/jpeg)
2024-04-12 01:48 PDT, sunus 		no flags
Details
RGBA, alpha 0.1 to 0.4, webkit vs gecko (552.58 KB, image/jpeg)
2024-04-12 11:50 PDT, Vitor Roriz 		no flags
Details
HTML with a reproducible case, including 10-100 opacity scale with each method (20.68 KB, text/html)
2024-06-18 13:13 PDT, tableau.scenes-0g 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
sunus
Comment 1 2024-04-12 01:46:04 PDT
Created attachment 470886 [details] test html
sunus
Comment 2 2024-04-12 01:48:32 PDT
Created attachment 470887 [details] screenshots in Safari/Chrome
Vitor Roriz
Comment 3 2024-04-12 11:50:32 PDT
Created attachment 470902 [details] RGBA, alpha 0.1 to 0.4, webkit vs gecko It seems that WebKit opacity increases "faster" than Gecko as well, looking at colors for alpha 0.1, 0.2, 0.3 and 0.4 (attached picture)
Radar WebKit Bug Importer
Comment 4 2024-04-19 01:36:15 PDT
<rdar://problem/126739961>
tableau.scenes-0g
Comment 5 2024-06-18 13:09:01 PDT
*** Bug 275565 has been marked as a duplicate of this bug. ***
tableau.scenes-0g
Comment 6 2024-06-18 13:12:51 PDT
Copying context from duplicate: 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) Please see "opacity" attachment. 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]
tableau.scenes-0g
Comment 7 2024-06-18 13:13:50 PDT
Created attachment 471701 [details] HTML with a reproducible case, including 10-100 opacity scale with each method
Note You need to log in before you can comment on or make changes to this bug.