Triple Blend

It’s been another five years since I last revisited this Proof of Concept (POC), and I’m excited to report that support for CSS mix-blend-mode has made significant strides.

Initially, it appeared that Safari was still lagging behind in terms of compatibility, but during my investigation, I stumbled upon an intriguing anomaly – one that might be perceived as either a bug or a subtle feature (insert sarcasm here).

The sections I’ve affectionately dubbed “BlendedSector,” each characterized by its unique color palette (cabaret, opera, and more), initially appeared in grayscale, giving the impression that the blending effect was malfunctioning. However, after some meticulous tinkering, a surprising discovery came to light: the issue seemed to revolve around the color choice for the second layer.

As it turns out, when the second layer employed full black (#000) as its primary color, Safari encountered difficulties in rendering the blending effect correctly. However, by making a simple adjustment and setting the color to #111, voilà – the blending worked seamlessly, and the vibrant colors of the sectors resurfaced.

Example

When viewing this in Chrome or Firefox it will show in colour and blended. In Safari - Version 16.0 (16614.1.25.9.10, 16614) it is in greyscale and not blended when using #000 for the 2nd layer.

safari

safari

safari

Here’s a screenshot of how it looks in Safari.

When using #111 for the 2nd layer, the colours and blend work in Safari as well.