Jump to content
GreenSock

Oliver16Years

mix-blend-mode in <div>

Recommended Posts

I was playing with mix-blend-modes when something strange happened:

When I moved the container <div> whith multiply blend mode assets inside, the assets switched back to normal blend mode. 

 

How is it possible?

 

Thanks.

 

See the Pen oLNBNb by oliver15years (@oliver15years) on CodePen

BlendModeInDiv.zip

Link to comment
Share on other sites

Applying the blend mode to the container div seems to fix it.

  • Like 2
Link to comment
Share on other sites

Applying the blend mode to the container div seems to fix it.

 

Yes it fix it, but what if I want to put more elements with different blend modes into the container? This is not a big deal with this unsupported browser feature at the moment, but what if I want to target Chrome to make a GUI or PhantomJS to render animation frames. Would be nice if I could shake or zoom the entire ad in the distant future. :)

Link to comment
Share on other sites

Yes it fix it, but what if I want to put more elements with different blend modes into the container? This is not a big deal with this unsupported browser feature at the moment, but what if I want to target Chrome to make a GUI or PhantomJS to render animation frames. Would be nice if I could shake or zoom the entire ad in the distant future. :)

Couldn't you just wrap the image in a different div and apply the blend mode to that?

Link to comment
Share on other sites

Same result: no matter how deep is the tree structure of the divs. If I tween one of the parent divs all the children loosing it's appearance. Strange because in Chorme dev tools / Elements view / Styles tab shows the right css... Is it a browser bug?

Link to comment
Share on other sites

Same result: no matter how deep is the tree structure of the divs. If I tween one of the parent divs all the children loosing it's appearance. Strange because in Chorme dev tools / Elements view / Styles tab shows the right css... Is it a browser bug?

But you could put the image in a div, apply the blending mode to that div, and then animate that specific div.  

 

I don't think it's a Chrome bug; the behavior is the same in Safari and Firefox.

 

If the div has a background color or background image there's no issue though: 

See the Pen XKJdPP by ohem (@ohem) on CodePen

Link to comment
Share on other sites

I don't understand this. We need to give a background color to the container to use blend mode in it? If I comment out the background:red; in your code, the blend mode switching back to normal. Then why the blend mode working when we not moved the container yet?

Thanks anyway Ohem. Forget it, it is not important. I won't use DOM blend modes while IE is still used. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×