Bug 272579

Summary: Different font-weight leads to different color in text. different in Chrome/Safari.
Product: WebKit Reporter: sunus <sunuslee>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: fantasai.bugs, karlcow, tableau.scenes-0g, vitor.roriz, webkit-bug-importer, zalan
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 17   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
screenshots.
none
test html
none
screenshots in Safari/Chrome
none
RGBA, alpha 0.1 to 0.4, webkit vs gecko
none
HTML with a reproducible case, including 10-100 opacity scale with each method none

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.