When messing with screen blending, I came across a bug in Chrome and Firefox when using screen blending with transform animations. Surprisingly, Safari rendered it right.
This is when you get when applying
mix-blending-mode: screen; on an
position: absolute;, so as to stack it on another element. Of course, this doesn't work in Edge.
See the Pen Screen Blending: Without animation by Ambrose Chua (@ambc) on CodePen.
When applying an animation on the
<img> element, this is what you would get in your current browser:
See the Pen Screen Blending: With animation by Ambrose Chua (@ambc) on CodePen.
Hey, what's going on here?
When using CSS animations, browsers switch to GPU acceleration to provide smooth animations. But when using GPU acceleration, transparent backgrounds are "lost", and the renderer interprets
background-color: transparent; as black. Since we are using
mix-blend-mode: screen; where black is used to make cutouts, the whole area on the page is treated as black, thus the image is not masked.
So, I tried to put
background-color: #fff; on body.
See the Pen Screen Blending: With Safari fix by Ambrose Chua (@ambc) on CodePen.
This sample renders well in Safari, but in Chrome and Firefox renders the same as the previous one.
Oct 2020: I noticed that this is now fixed in Firefox, but still a problem in Chrome.
Oddly, Chrome and Firefox requires that the parent container be filled with white for blending mode to work. So, here's the completed version:
See the Pen Screen Blending: With fix by Ambrose Chua (@ambc) on CodePen.
Perfect, we now have animated, masked images!