New issue
Advanced search Search tips
Note: Color blocks (like █ or █) mean that a user may not be available. Tooltip shows the reason.

Issue 612062 link

Starred by 2 users
Status: Fixed
Owner: ----
Closed: Jun 2016
Cc:
█ kavvaru@chromium.org
█ ranjitkan@chromium.org
vmp...@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Compat



Sign in to add a comment

Regression in mix-blend-mode CSS property when using transparent PNGs

Reported by fogle...@gmail.com, May 15 2016 
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2735.0 Safari/537.36

Example URL:
alexfogler.com

Steps to reproduce the problem:
1. Overlay two layers with a transparent PNG and some other content as background.
2. Set mix-blend-mode property to any value on both.
3. See PNG lose transparency and blocking the layer behind it.

What is the expected behavior?
The overlaying layer should blend with the layer behind it, and maintain transparency.

What went wrong?
The overlaying layer loses transparency and occludes layer behind it.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? N/A 

Did this work before? Yes Before most recent Chrome update.

Does this work in other browsers? Yes 

Chrome version: 52.0.2735.0  Channel: canary
OS Version: OS X 10.11.4
Flash Version: Shockwave Flash 22.0 r0

Comment 1 by fogle...@gmail.com, May 16 2016 

Additional information: This also breaks SVG backgrounds. It seems as though any transparency is removed regardless of background format.

Comment 2 Deleted

Comment 3 Deleted

Comment 4 by fogle...@gmail.com, May 16 2016 

I had to update alexfogler.com to get rid of the issue, so it no longer shows an example of the bug. If you want to see it in action, target the div's with id 'a' and 'f', and set the mix-blend-mode property to 'multiply'.

Comment 5 Deleted

Comment 6 by kavvaru@chromium.org, May 16 2016

Cc: kavvaru@chromium.org
Components: Blink>CSS
Labels: Needs-Feedback
Unable to reproduce the issue on windows 7, Mac 10.11.4 using chrome version 52.0.2735.0 and stable 50.0.2661.102 with the below steps

1. Go to URL alexfogler.com
2.Able to move f letter but in Firefox observed the letter is fixed.

Please find the attached screen cast and confirm the expected behavior or screen shot for better triaging the issue.

Thanks,
612062.mp4
430 KB Download

Comment 7 by ranjitkan@chromium.org, May 26 2016

Cc: ranjitkan@chromium.org
@ foglerek: Gentle ping, can you please update the issue as per the comments above.

Thanks.!

Comment 8 by pdr@chromium.org, Jun 10 2016

Components: -Blink>CSS Blink>Paint
Labels: -Needs-Feedback Needs-TestConfirmation M-52
Status: Fixed (was: Unconfirmed)
I can confirm this bug in 52.0.2743.6/dev but it appears to be fixed at tip-of-tree.

I've attached a minimized testcase. If the test passes, there should be two semi-transparent green boxes sliding back and forth. If the test fails, the boxes will have large white outlines and will not overlap cleanly.

@testers, please confirm this regression doesn't affect beta.
mixedblendmode.html
1.3 KB View Download
►

Sign in to add a comment