CSS screen blending caveat

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 <img> with 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.

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!