Mix-Blend-Mode Not Working in Webkit-Browsers When Element Is Direct Child of Body

mix-blend-mode not working in webkit-browsers when element is direct child of body

You are facing an issue related to background propogation since background applied to body has a special behavior

If you consider another container it will work fine:

div {

  background-color: #fff;

}

.volume-icon {

  mix-blend-mode: difference;

}

<div>

  <img class="volume-icon" src='https://svgshare.com/i/HxZ.svg'>

</div>

mix-blend-mode: difference not working on Chrome

This should work, but you have to give a background color to the html. You missed that in the fiddle. Adding a background color to the html worked. Check the snippet.

You can also try the same in fiddle by giving background color to the html

html{

  background:#fff;

  margin:0;

  padding:0;

}

body { 

  text-align: center; 

  font-family: Montserrat, sans-serif; 

  margin: 0;

  height:100vh;

  background: linear-gradient(90deg,#fff 50%,#000 50%);

}

h1 {

  font-size: 10vw;

  margin: 0; 

  color:#fff;

  mix-blend-mode: exclusion;

}

<h1>BAD BOY<h1>

Why does the browser try to use an otherwise invalid property declaration when I introduce a CSS variable?

This how CSS variables are meant to work. When using CSS variables the browser can only evalute the value at run-time so the value will be considered as valid (or lets say in a standby mode) until we evalute the variable and if the browser find the whole value invalid, it will fallback to initial or inherit:

A declaration can be invalid at computed-value time if it contains a var() that references a custom property with its initial value, as explained above, or if it uses a valid custom property, but the property value, after substituting its var() functions, is invalid. When this happens, the computed value of the property is either the property’s inherited value or its initial value depending on whether the property is inherited or not, respectively, as if the property’s value had been specified as the unset keyword. ^ref

A more explicit example with a clearly non valid value:

html {
  background:linear-gradient(red,blue); /* this will be used */
  background:strange-gradient(red,blue); /* this is a joke */
  
  min-height:100%;
}

Simple jQuery working on Chrome, not on Firefox & other browsers

I'd suggest that it might be because the background-image is never going to be exactly equal (===) to the path of the (presumably) image directory http://www.infiniscale.com/beta/.

If you want to simply hide those .elemproduct elements without a background-image it seems a little easier to use:

function hideBox() {
    var $eP = $('.elemproduct');
    $eP.each(

    function() {
        if (!$(this).css('background-image') || $(this).css('background-image') == 'none') {
            $(this).hide();
        }
    });
}

hideBox();

JS Fiddle demo.

---

Edited to compensate with the problem that an empty url() in the background (or background-image) property is filled with the URL of the current page. This makes for quite a bulky if statement, but it does at least work reliably (so far as I can currently tell), which is an improvement on the above. Latest iteration:

function hideBox() {
    var href = document.location;
    var $eP = $('.elemproduct');
    $eP.each(

        function() {
        var imgString = $(this).css('background-image');
        var srcString = imgString.replace('url(','').replace(')','');
            if (!imgString || imgString == 'none' || srcString == href) {
                $(this).hide();
            }
        });
}
hideBox();

JS Fiddle demo.

---

Edited and amended the above, to remove the unnecessary variable (srcString) and its multiple calls to .replcace():

function hideBox() {
    var href = document.location;
    var $eP = $('.elemproduct');
    $eP.each(

        function() {
        var imgString = $(this).css('background-image');
            if (!imgString || imgString == 'none' || imgString.indexOf(href) > -1) {
                $(this).hide();
            }
        });
}
hideBox();

JS Fiddle demo.

---

Edited in response to comment from OP:

I'm trying to get it working but under chrome everything is shown, IE everything is hidden. Even if I see that your code works under jsfiddle ... I'm not understanding everything, i.e imgString.indexOf(href) > -1.

The if tests for three conditions:

1. !imgString, if there's no string returned from the background-image property of the .css() method.
2. imgString == 'none', because jQuery (sometimes, or possibly always) returns 'none' if there is no defined background-image.

3. imgString.indexOf(href) > -1. This looks at the imgString variable to see if it contains the string contained by the variable href. If the string is found it returns the position at which it was found; if it was not found it returns -1.

   var string = "abcdef";
   alert(string.indexOf('a')); // alerts: 0
   

JS Fiddle demo.

    alert(string.indexOf('bc')); // alerts: 1

JS Fiddle demo.

    alert(string.indexOf('ef')); // alerts: 4

JS Fiddle demo.

    alert(string.indexOf('x')); // alerts: -1

JS Fiddle demo.

This is to check that the empty url() in CSS isn't simply being filled automatically by the browser.

---

Edited after being pointed at the URL for the page and finding that the use of PHP and GET made things a tad more awkward than I'd imagined.

Using the following in the console (certainly in Chromium) worked:

$('.elemproduct').each(
    function() {
        if ($(this).css('background-image') == 'url(' + document.location.toString().substring(0, document.location.href.toString().indexOf('index')) + ')') {
            $(this).hide();
        }
    });

The above, working in JS Fiddle and implemented into the hideBox() function:

// in real life use:
// var urlString = document.location.href;
var urlString = 'http://www.infiniscale.com/beta/index.php?id=48';

function hideBox() {
    var href = document.location;
    var $eP = $('.elemproduct');
    $eP.each(
        function(){
            if ($(this).css('background-image') == 'url(' + urlString.substring(0,urlString.indexOf('index')) + ')'){
                $(this).hide();
            }
        });
}
hideBox();

A demonstration of the above is available at JS Fiddle!

---

Related Topics