Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

mixBlendMode: "color" while Animation not working on Safari

Go to solution Solved by OSUblake,

Recommended Posts

I am developing a banner and theres a train with a door opening that goes under a layer with "mix-blend-mode: color". It works on most banners but during the animation Safari on the Mac loses the blending mode. Any suggestion to make it work without any big workarounds like two doors with different colors and hidden overflow?

See the Pen ZEXEqGR by peternoster (@peternoster) on CodePen

Link to comment
Share on other sites

Clients huh. You can't magically conjure up browser support!


I guess the only workaround is to use blend mode in a design tool and export images 🤷🏼‍♀️

Link to comment
Share on other sites

yeah, I try to animate now with two images and an hidden overflow in CSS. Much more hassle. sigh

Link to comment
Share on other sites

Thank you, that a good solution. I programmed a workaround for this banner since the deadline was today. But I have to try if I can use this in an commercial banners.


At least my workaround mit clip-path runs stable in all browsers.

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.