New issue
Advanced search Search tips

Issue 683300 link

Starred by 1 user

Issue metadata

Status: Available
Owner: ----
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Android , Windows , Chrome , Mac
Pri: 2
Type: Bug



Sign in to add a comment

mix-blend-mode not working above/before animation elsewhere in DOM, under certain conditions

Reported by keithjgr...@gmail.com, Jan 20 2017

Issue description

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

Example URL:
http://codepen.io/keithjgrant/pen/RKpEKB

Steps to reproduce the problem:
1. Absolutely position an element with a background image. Apply a negative z-index to stack it behind following contents
2. Add 2 or more elements that use mix-blend-mode
3. Add an element with an animation after one of the mix-blend-mode elements but before the other

What is the expected behavior?
Both elements with mix-blend-mode should apply the blend.

What went wrong?
Only elements appearing after the animation in the DOM will apply their mix-blend-mode. Those before it do not.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 55.0.2883.95  Channel: stable
OS Version: OS X 10.11.6
Flash Version: Shockwave Flash 24.0 r0

Works as expected in Firefox.
 

Comment 1 by ajha@chromium.org, Jan 23 2017

Labels: Needs-Triage-M55
Components: -Blink Blink>Animation
Labels: -Needs-Triage-M55 M-58 OS-Linux OS-Windows
Status: Untriaged (was: Unconfirmed)
Able to reproduce the issue on Mac 10.12.2, Win 10 and Ubuntu 14.04 using 55.0.2883.95/87 and canary 58.0.2999.0.
This a non-regression issue since M 43.0.2350.0 and prior to it seems like it was not supported.

Comment 3 by suzyh@chromium.org, Jan 24 2017

Labels: Update-Quarterly
Status: Available (was: Untriaged)

Comment 4 by suzyh@chromium.org, Jan 24 2017

Labels: Hotlist-Interop
Components: -Blink>Animation Blink>Paint
This sounds like a compositor layering issue.
Yes, this is a compositor layering issue.
Components: -Blink>Paint Blink>Compositing
Project Member

Comment 8 by sheriffbot@chromium.org, Feb 12 2018

Labels: Hotlist-Recharge-Cold
Status: Untriaged (was: Available)
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue.

Sorry for the inconvenience if the bug really should have been left as Available. If you change it back, also remove the "Hotlist-Recharge-Cold" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Labels: -Hotlist-Recharge-Cold OS-Android OS-Chrome
Status: Available (was: Untriaged)
What is the expected layer setup for something with blend mode applied? The first H1 needs to blend but is painted in the same layer as everything else. The second H1 blends because it gets its own layer, presumably becuase of the effects of the layer for the animation.

Sign in to add a comment