Bug 237077 - mix-blend-mode renders incorrect color after the underlying layer's layout changed
Summary: mix-blend-mode renders incorrect color after the underlying layer's layout ch...
Status: RESOLVED DUPLICATE of bug 235106
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 15
Hardware: Mac (Apple Silicon) macOS 12
: P2 Major
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-02-23 03:09 PST by chu-vevo
Modified: 2022-02-23 19:09 PST (History)
4 users (show)

See Also:

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 an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description chu-vevo 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
Comment 1 chu-vevo 2022-02-23 03:09:40 PST 
Created attachment 452956 [details]
Correct render before the CSS change
Comment 2 chu-vevo 2022-02-23 03:10:02 PST 
Created attachment 452957 [details]
Render broke after the CSS change
Comment 3 chu-vevo 2022-02-23 03:10:38 PST 
Created attachment 452958 [details]
This persist after resize to a wider window
Comment 4 chu-vevo 2022-02-23 03:11:03 PST 
Created attachment 452959 [details]
Correct color of the wider window version
Comment 5 chu-vevo 2022-02-23 03:14:25 PST 
The mix-blend-mode behaves correctly on Chrome and Firefox.
Comment 6 Radar WebKit Bug Importer 2022-02-23 15:37:11 PST 
<rdar://problem/89382379>
Comment 7 Simon Fraser (smfr) 2022-02-23 19:09:01 PST 

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