New issue
Advanced search Search tips

Issue 922105 link

Starred by 2 users

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

CSS blending modes not rendering properly in Chrome

Reported by chesscha...@gmail.com, Jan 15

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

Steps to reproduce the problem:
1. Visit my pen in Chrome (https://cdpn.io/WzNwWe)
2. Adjust range slider scrubber/thumb at bottom (move on left side, white bg)
3. Watch colors change as the animation starts/stops. Refer to attached images of still and animating behaviors

What is the expected behavior?

What went wrong?
CSS blending modes aren't rendering properly. If you adjust the range slider on the left side of my pen (including in steps), you'll see the colors look correct while animating but get muted once still. I've successfully reproduced this issue across multiple devices and versions of Chrome on both Windows and Mac. I have yet to find an instance of Chrome where this issue does not occur. To provide some more context, this also occurs in Opera and Safari except they render blending modes incorrectly even while animating. Edge still has zero support for blending modes. Firefox appears to be the only browser that renders these blending modes properly both while still and while animating.

Did this work before? No 

Chrome version: 71.0.3578.98  Channel: stable
OS Version: OS X 10.14.1
Flash Version:
 
still-wrong.png
31.8 KB View Download
animating-correct.png
39.3 KB View Download
Labels: Needs-Triage-M71

Comment 2 by woxxom@gmail.com, Jan 16 (6 days ago)

A similar issue was supposedly fixed in  bug 768724 .
FWIW I can't repro in Windows 7 here.
Could be related to the monitor profile.
Try forcing sRGB in chrome://flags/#force-color-profile
If it solves the issue, it'd be helpful if you upload your monitor profile here.
Things to try: disabling hardware accel in browser settings, flipping chrome://flags/#enable-gpu-rasterization

Comment 3 by viswa.karala@chromium.org, Jan 16 (6 days ago)

Cc: viswa.karala@chromium.org
Components: -UI Blink>CSS
Labels: Needs-Feedback Triaged-ET
Unable to reproduce the issue on chrome reported version# 71.0.3578.98 using Mac 10.12.6 with steps mentioned below:
1) Launched chrome reported version and navigated to URL: https://cdpn.io/WzNwWe
2) Able to see animation rendering properly

@Reporter: Please find above mentioned information and attached screencast for your reference. Try to test this issue by creating new person with no apps and extensions in it and let us know if the issue still persists.

Thanks!

922105.mp4
1.2 MB View Download

Comment 4 by chesscha...@gmail.com, Jan 17 (5 days ago)

Interesting. I'm also on a recent iMac model running the latest version of Chrome.

I am noticing in the video you attached that the opposite issue appears to occur. For a split second at 0:13, as the circles begin animating, you see the colors switch.
Screen Shot 2019-01-17 at 11.04.18 AM.png
191 KB View Download
Screen Shot 2019-01-17 at 11.04.33 AM.png
182 KB View Download
Project Member

Comment 5 by sheriffbot@chromium.org, Jan 17 (5 days ago)

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding the requester to the cc list.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Comment 6 by chesscha...@gmail.com, Jan 17 (5 days ago)

@woxxom forcing sRGB fixed my issue. I've never heard of a monitor profile but hopefully the data I'm pasting below and the screenshots I'm attaching will provide the info you need.

Device: iMac (Retina 5K, 27-inch, 2017)
Graphics: Radeon Pro 580 8192 MB

—

@viswa.karala Maybe you should test forcing sRGB too and post your monitor profile if that fixes the color switching I noted in my previous comment above.
Screen Shot 2019-01-17 at 11.09.57 AM.png
219 KB View Download
Screen Shot 2019-01-17 at 11.13.28 AM.png
117 KB View Download

Comment 7 by e...@chromium.org, Jan 17 (5 days ago)

Components: -Blink>CSS Blink>Compositing

Comment 8 by schenney@chromium.org, Yesterday (35 hours ago)

Components: -Blink>Compositing Blink>Paint
Owner: ccameron@chromium.org
Status: Assigned (was: Unconfirmed)
Assigned to ccameron because (a) mac and (b) color profile issue. The only issue here in my mind is that the profile effect changes when animating. If that's a Blink bug send it back to us.

Comment 9 by chesscha...@gmail.com, Yesterday (34 hours ago)

Thanks @schenney! Yeah, it's correct when animating, incorrect when still. Appears to be doing the opposite for @viswa.karala, also on a mac

Sign in to add a comment