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.
When applying an animation on the
<img> element, this is what you would get in your current browser:
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.
This sample renders well in Safari, but in Chrome and Firefox renders the same as the previous one.
Oddly, Chrome and Firefox requires that the parent container be filled with white for blending mode to work. So, here's the completed version:
Perfect, we now have animated, masked images!