add test to background-blend-mode and mix-blend-mode css properties.
yukulele
All 10 comments
and mix-blend-mode?
yukulele
on 2 Aug 2014
Unfortunatly, "[...] in some browsers, mix-blend-mode is implemented; the property is valid, the automated tests pass, but no blending actually takes place" - http://blogs.adobe.com/webplatform/2013/09/12/browser-support-matrix-for-css-blending/
patrickkettner
on 2 Aug 2014
@patrickkettner I see the branch that you merged that "fixes #1388". However, I just downloaded the latest from modernizr.com/download and not seeing anything for in my page for background-blend-mode. I was expecting a class to be added to <html>. Is this currently supported?
jeffmagill
on 12 Sep 2014
For someone needing a solution for detecting background-blend-mode, this worked for me
if(!('backgroundBlendMode' in document.body.style)) {
// No support for background-blend-mode
var html = document.getElementsByTagName("html")[0];
html.className = html.className + " no-background-blend-mode";
}
isaacrankin
on 12 Feb 2015
@isaacwebfix we landed a detect for this in master, that is more of less what you suggested
patrickkettner
on 17 Feb 2015
I'm still having issues with mix-blend-mode. Could this ever be worked around??
whaaaley
on 21 Apr 2016
Having a project where I need to test for mix-blend-mode specifically. Hope this will get resolved one day :) If I'm correct this issue persists due to browser vendors?
SndrL
on 12 May 2016
@dustindowell22 no, no detect has been created yet
@SndrL less the vendors fault as much as we just lack an API to accurately detect colors. You _might_ be able to render it inside of a foreignObject in an SVG element inside of canvas, then check the pixel value, but I have taken zero time to actually test that theory. It is a bit gross as it requires a number of other browser features to work in order to check.
patrickkettner
on 19 May 2016
One way you could test for support is by using @supports, as suggested here:
http://stackoverflow.com/a/28088291/673457
@supports not (mix-blend-mode: multiply) {
// fallback styles
}
This will work in most modern browsers, but not IE 11 or below:
http://caniuse.com/#feat=css-featurequeries
tedw
on 10 Mar 2017
IE11 doesn't support background-blend-mode – but also not @supports,
so here a JavaScript based test is necessary.
strarsis
on 7 Dec 2018
Related issues
claudchan
·
7Comments
peterwilsoncc
·
9Comments
BasJan81
·
9Comments
YounesKeraressi
·
8Comments
chrisbell08
·
6Comments
Most helpful comment
One way you could test for support is by using
@supports, as suggested here:http://stackoverflow.com/a/28088291/673457
This will work in most modern browsers, but not IE 11 or below:
http://caniuse.com/#feat=css-featurequeries