Bug 237077

Summary:

mix-blend-mode renders incorrect color after the underlying layer's layout changed

Product:

WebKit

Reporter:

chu-vevo

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED DUPLICATE

Severity:

Major

CC:

dino, simon.fraser, webkit-bug-importer, zalan

Priority:

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

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 ***