Sunrise in the fog

    Mix Blend Mode

    I was recently working on a client project where I was tasked with building out a collections page. Part of the design was that the product tiles could have varying color - I quickly ran into the problem that the product images all had white backgrounds, and not transparent ones.

    So, I did a little research on mix blend mode.

    Mix blend mode allowed me to have those product images, instead of displaying their consistent white backgrounds, take their backgrounds and blend them in (change them) to whatever the background color around them is. At least, that's the simple way of describing it.

    However, I ran into another problem. Things seemed to work on most browsers. My Android phone had a struggle bus though. The entire image, and not just its background, had been faded in with the surrounding background!

    Turns out, there's a really simple fix. Adding the CSS rule `will-change: opacity;` solved the problem. Apparently, that's the only way to get browsers to understand that some of the background will blend in with the background - presumably by setting the opacity on some of the background? I'm not entirely sure how browsers compute what changes/blends in, but the fact that we're telling it the opacity will change makes me wonder.