Browser blend-mode issues

Demo for cross-browser issues with CSS and SVG blend modes.

CodePen

• SVG feBlend

• CSS: mix-blend-mode

JS feature detection

function isMixBlendModeSupported() {
  var result = false;
  try {
    // Narrow filter down to exclude browsers without CSS @supports API:
    result = window.CSS.supports('mix-blend-mode', 'difference');

    // Exclude Chrome-based browsers when P3 gamut is supported (Mac OS retina, for example),
    // because colors are rendered wrong, when filter product should be rgb(0, 255, 255),
    // it is rendered as rgb(0, 207, 223).
    // Ref.: https://github.com/siberex/blend-mode-issues
    if (typeof window['chrome'] !== 'undefined'
          && window.matchMedia("(color-gamut: p3)").matches) {
      result = false;
    }
  } catch(e) {}
  return result;
}

// Ref.: https://github.com/Modernizr/Modernizr/pull/531
function isSvgFilterSupported() {
  var result = false;
  try {
    result = typeof SVGFEBlendElement !== undefined &&
      SVGFEBlendElement.SVG_FEBLEND_MODE_DIFFERENCE !== undefined;
  } catch(e) {}
  return result;
}

Screenshots

SVG feBlend

Mac OS Chrome 96

Mac OS FireFox 95

MacOS.Safari 15.2

Windows Chrome 96

Windows IE 11 (the most correct one)

mix-blend-mode

Mac OS Chrome 96

Mac OS Safari 15.2 P3 colors

Mac OS Firefox 95

Windows Chrome 96