Bug 237077

Summary: mix-blend-mode renders incorrect color after the underlying layer's layout changed
Product: WebKit Reporter: chu-vevo
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Major CC: dino, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 15   
Hardware: Mac (Apple Silicon)   
OS: macOS 12   
Attachments:
Description Flags
Correct render before the CSS change
none
Render broke after the CSS change
none
This persist after resize to a wider window
none
Correct color of the wider window version none

chu-vevo
Reported 2022-02-23 03:09:06 PST
I was building a website for a company and I use a layer with full-height linear-gradient plus mix blend mode to apply some change when scrolling. And I have this JS resize observer to change the CSS of the underlying layer once the window width-height ratio crossed 1:1. In Safari, this leads to muddy color rendering once the CSS changed, and it will stay that way until a page refresh. Please see the attachments for the description. And this is the website preview link, I'm authorized to file this bug using the link: https://62160a3454422e00075c955c--connect3-web.netlify.app
Attachments
Correct render before the CSS change (1.09 MB, image/png)
2022-02-23 03:09 PST, chu-vevo 		no flags
Details
Render broke after the CSS change (403.71 KB, image/png)
2022-02-23 03:10 PST, chu-vevo 		no flags
Details
This persist after resize to a wider window (2.39 MB, image/png)
2022-02-23 03:10 PST, chu-vevo 		no flags
Details
Correct color of the wider window version (1.29 MB, image/png)
2022-02-23 03:11 PST, chu-vevo 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
chu-vevo
Comment 1 2022-02-23 03:09:40 PST
Created attachment 452956 [details] Correct render before the CSS change
chu-vevo
Comment 2 2022-02-23 03:10:02 PST
Created attachment 452957 [details] Render broke after the CSS change
chu-vevo
Comment 3 2022-02-23 03:10:38 PST
Created attachment 452958 [details] This persist after resize to a wider window
chu-vevo
Comment 4 2022-02-23 03:11:03 PST
Created attachment 452959 [details] Correct color of the wider window version
chu-vevo
Comment 5 2022-02-23 03:14:25 PST
The mix-blend-mode behaves correctly on Chrome and Firefox.
Radar WebKit Bug Importer
Comment 6 2022-02-23 15:37:11 PST
<rdar://problem/89382379>
Simon Fraser (smfr)
Comment 7 2022-02-23 19:09:01 PST
*** This bug has been marked as a duplicate of bug 235106 ***
Note You need to log in before you can comment on or make changes to this bug.