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.

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!