Issue 429468 in chromium: transform disables mix-blend-mode

[chro...@googlecode.com]

Status: Unconfirmed
Owner: ----
Labels: Pri-2 Via-Wizard Type-Compat OS-Windows Arch-x86_64

New issue 429468 by cameron....@gmail.com: transform disables mix-blend-mode
https://code.google.com/p/chromium/issues/detail?id=429468

UserAgent: Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/40.0.2201.2 Safari/537.36

Example URL:
http://jsfiddle.net/5znes7b2/

Steps to reproduce the problem:
1. Div has "mix-blend-mode" css property.
2. Parent has "transform" property.
3. "mix-blend-mode" stops working on div.

What is the expected behavior?
"mix-blend-mode" should still work on div.

What went wrong?
"mix-blend-mode" stopped working.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? N/A

Did this work before? N/A

Does this work in other browsers? N/A

Chrome version: 40.0.2201.2 Channel: n/a
OS Version: 6.2 (Windows 8)
Flash Version: Shockwave Flash 15.0 r0

Here is the markup that will reproduce this bug:

<style>
body {
background: linear-gradient(to left,#000,#369);
}
.bad {
transform: scale(1);
}
.test {
height: 100px;
background: linear-gradient(to bottom,#000,#fff);
mix-blend-mode: overlay;
}
</style>

<div class="bad">
<div class="test"></div>
</div>
<div class="good">
<div class="test"></div>
</div>

--
You received this message because this project is configured to send all
issue notifications to this address.
You may adjust your notification preferences at:
https://code.google.com/hosting/settings

[chro...@googlecode.com]

Updates:
Status: Untriaged
Labels: -OS-Windows OS-All M-40 Cr-Blink-HTML

Comment #1 on issue 429468 by manoranj...@chromium.org: transform disables
mix-blend-mode
https://code.google.com/p/chromium/issues/detail?id=429468

I am able to reproduce this issue on Latest Canary, Dev, Beta & Stable
versions of chrome on Win7 64bit, Mac OS X 10.9.5 & Linux Ubuntu 14.04.

This issue is existing from M27: 27.0.1412.0 (Official Build 182397) and
this feature is not supporting on older builds.

Thank you!

[chro...@googlecode.com]

Updates:
Labels: -Cr-Blink-HTML Cr-Blink-Rendering

Comment #2 on issue 429468 by tk...@chromium.org: transform disables
mix-blend-mode
https://code.google.com/p/chromium/issues/detail?id=429468

(No comment was entered for this change.)

[chro...@googlecode.com]

Comment #6 on issue 429468 by jakearch...@chromium.org: transform disables
mix-blend-mode
https://code.google.com/p/chromium/issues/detail?id=429468

Pretty sure this is working as intended.

From the spec: "This group must then be blended and composited with the
stacking context that contains the element."
http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode

"transform" greats a stacking content, so .test is blended with .bad, but
not body. If you make .good a stacking context (position: relative;
z-index: 1) you'll see the same issue.

Firefox's implementation is the same.